居中位置：固定元素

一尘不染

居中位置：固定元素

css

我想创建一个position: fixed;以动态宽度和高度为中心的弹出框。我曾经margin: 5% auto;为此。没有position: fixed;它，则水平居中，但不能垂直居中。添加后position: fixed;，它甚至没有水平居中。

这是完整的设置：

.jqbox_innerhtml {

    position: fixed;

    width: 500px;

    height: 200px;

    margin: 5% auto;

    padding: 10px;

    border: 5px solid #ccc;

    background-color: #fff;

}


<div class="jqbox_innerhtml">

    This should be inside a horizontally

    and vertically centered box.

</div>

如何使用CSS在屏幕上将此框居中？

阅读 374

2020-05-16

共1个答案

一尘不染

基本上，您需要设置div top并将left其50%居中放置在div的左上角。您还需要将margin-top和设置为margin- leftdiv的高度和宽度的负一半，以将中心移到div的中间。

因此，在提供<!DOCTYPE html>（标准模式）的情况下，此操作应：

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

或者，如果你不关心垂直和旧的浏览器，如IE6 / 7为中心，那么你就可以代替也增加left: 0，并right: 0以该元素具有margin- left和margin-right的auto，使得具有固定宽度的固定定位的元素知道在哪里的左，右偏移开始。因此，在您的情况下：

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

同样，如果您关心IE，则仅在IE8 +中有效，并且仅水平居中而不垂直。

2020-05-16