如何使用 css 将 div 显示到页面中心并自动将内容调整到页面？答案

【问题标题】：How to display a div to center of the page and auto fit content to page using css?如何使用 css 将 div 显示到页面中心并自动将内容调整到页面？
【发布时间】：2021-09-05 15:21:04
【问题描述】：

我试图创建一个模式窗口，它将显示在桌面浏览器、移动浏览器和平板电脑中。

我想同时做div的绝对位置，div应该在水平和垂直的页面中心。

我尝试了以下

#outerdiv{
    top: 50%;
    left: 50%;
    position: fixed;
    width:100%;
    margin-left:0px;
}
#innerdiv{
    width:50%;
    height:100%
}

上面的代码自动将内容适应页面。但是如何使绝对位置或中心在水平和垂直方向上对齐。我正在像弹出窗口一样显示这个 div。

【问题讨论】：

标签： javascript html css

【解决方案1】：

这个解决方案应该随着窗口大小而优雅地缩放，并且在调整大小时也是如此。我们给父级窗口的宽度和高度，如下所示：

body{
    height:100%;
    width:100%;
}

然后我们将包含的div指定为：

只有一半的高度和宽度
将顶部和底部填充四分之一（占用空间的一半）

像这样：

#innerdiv{
    position:fixed;
    width:50%;
    height:50%;
    top:25%;
    margin-left:25%;
    border: 1px black solid;
}

jsFiddle 在这里：jsFiddle

【讨论】：

设置前 25% 会在移动设备上生效吗？
应该是！这是标准的 CSS，但如果不是，你可以试试margin-top:25%;。使用top，您实际上是在移动 div 的位置，使用margin-top，我们正在为 div 设置边距。

【解决方案2】：

要使 div 水平居中对齐，我认为最好的技巧是：

left:50%;
margin-left:-"half the width"px;

对于垂直对齐，我会使用 JavaScript 并计算屏幕的高度

var height = $(window).height();
var div_height = $('#div').height();
$('#div').css('top', (height - div_height) / 2);

您当然也可以通过将“窗口”更改为父元素来将其应用于父元素。

【讨论】：

会占用整个窗口还是当前窗口高度？
浏览器视口的高度根据我的经验，它在垂直固定 div 方面比 css 解决方案效果更好……尤其是较小的设备。

【解决方案3】：

假设html结构如下：

<body>
    <div id="yourDiv">
    <!-- modal content -->
    </div>
</body>

您可以使用以下样式居中您的容器：

#yourDiv {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 500px;
    height: 500px;
}

注意：您需要为容器指定高度和宽度，以便居中工作。

这是Fiddle.

【讨论】：

如果窗口大小减小会发生什么？它会改变显示吗？
模态将保持居中。您可能需要更改它的大小，但您可以使用媒体查询来做到这一点。此解决方案适用于所有浏览器和屏幕尺寸。
好的，我会试试的

【解决方案4】：

我会选择固定大小的.popup。

.popup {
     height: 300px;
     width: 300px;
     position: fixed;
     top: 50%;
     left: 50%;
     margin: -150px;
   }

【讨论】：