居中位置：固定元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我想创建一个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在屏幕上将此框居中？

回答：

基本上，您需要设置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 +中有效，并且仅水平居中而不垂直。

以上是 居中位置：固定元素 的全部内容， 来源链接： utcz.com/qa/403254.html

回到顶部