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

一尘不染

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

css

我正在尝试在屏幕的正中央为我的网站中心的目标网页创建一个div，但是它不起作用。

这是我的代码

CSS：

.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}

HTML：

<div id="centerDiv" class="centerDiv">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>

谢谢。

阅读 240

2020-05-16

共1个答案

一尘不染

注意： 如果您尝试将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%;
}

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

2020-05-16