如何将一个div居中放置于网页的中央？

Question

我希望将我的div放置在网页的中心位置。我想要创建一个预载入的div，应该位于网页的中心位置，在页面加载后，该div将被隐藏。如何实现这样的效果？这个div应该水平和垂直居中。

- Registered User

Answer 1

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

.middle{
  margin: auto;
  width: 900px;
}

- Spyros

---

正确的答案。记得设置宽度，否则 div 将假定其宽度为 100%，中心将无法显示。 - GusDeCooL

你可以根据自己的喜好进行设置，900像素只是一个例子。 - Spyros

这个会把它垂直居中吗？ - Registered User

不，这是水平的，垂直对齐需要绝对定位。说实话，除非真的需要，否则我不太建议使用，但你可能想看一下：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - Spyros

我已经等了12年才看到这个CSS片段-你无法想象过去为了让东西居中而必须使用的各种丑陋的方法。唉。 - immutabl

Answer 2

要使一个div水平垂直居中，你可以这样做：

标记：

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

CSS（层叠样式表）

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

fiddle: http://jsfiddle.net/steweb/qSvAQ/1/

- stecb

---

这对我很有帮助。谢谢！ :) 我希望这不会在除了Firefox之外的其他浏览器中出现问题... - Registered User

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