尝试将div在屏幕中水平和垂直居中

尝试将div在屏幕中水平和垂直居中

注意： 如果您尝试将div水平和垂直居中放置，建议您查看flexbox。您仍然需要提供后备支持，但是flexbox是未来，这太神奇了。

更新： 现在所有现代浏览器都支持flexbox 。

首先，您需要给div静态宽度和高度。

其次，你必须设置

position: absolute;

和

left: 50%; top: 50%;

那么你必须做一个

margin-left

和

margin-top

属于高度和宽度的一半。然后它将正确显示。

CSS：

.centerDiv{  width: 800px;  border-radius: 5px;  background: #ccc;  padding: 10px;  height: 50px;  position: absolute;  margin-top: -25px;  margin-left: -400px;  top: 50%;  left: 50%;}

附注：我对您的样式进行了一些更改，以便您可以实际阅读文本。希望这可以帮助！