将 div 居中到网页的中间？

Posted 2023-02-23

【中文标题】将 div 居中到网页的中间？

【英文标题】：Centering a div to the middle of the web page?

【发布时间】：2011-06-23 07:08:00

【问题描述】：

我想让我的 div 位于网页的中间位置。我正在尝试制作一个预加载器 div，它应该位于网页的中间部分，并且在页面加载后，该 div 将被隐藏。我怎样才能做到这一点？

div 应该水平和垂直居中。

【参考方案1】：

<div class = 'middle'></div>

.middle
  margin: auto;
  width: 900px;

【讨论】：

正确答案。记得设置你的宽度，否则 div 会假设它的宽度是 100% 并且中心不会显示。

没错，你可以根据自己的喜好设置，这里900px只是一个例子。

这个也垂直居中吗？

nop，这是水平的，垂直对齐需要绝对定位。老实说，除非真的需要，否则我不会真正推荐它，但您可能想看看：jakpsatweb.cz/css/css-vertical-center-solution.html

我已经等了 12 年才看到这一点 CSS - 你无法想象我在过去为了让事情居中而不得不陷入困境。啧啧。

【参考方案2】：

将 div 居中 hor 和 ver 你可以这样做：

标记

<div class="centered"></div>

css

.centered
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;

小提琴：http://jsfiddle.net/steweb/qSvAQ/1/

【讨论】：

这对我有用.. 谢谢！ :) 我希望这不会在 Firefox 之外的其他浏览器中中断...

不客气.. 它适用于所有浏览器 ;) IE6 - 谁在乎 - 我也认为（现在无法测试）