真实中心垂直和水平CSS Div

Question

如何在一个保持页面中创建一个真正的中心CSS div跨浏览器？

我已经尝试过这个2007 css技巧 - 如何在中心正确居中一个对象,但正如你从我的JSFiddle中看到的那样,它不是100%的中心.

HTML:

<div class="center">
  <p>Text</p>
</div>

CSS:

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

Answer 1

该技术要求元素具有固定的宽度和高度.您没有设置宽度和高度.根据您的边框和边距,要使其居中,宽度需要为190像素,高度需要为90像素.使用line-height并text-align结合固定的宽度和高度使文本和边框居中.试试吧.

CSS

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

Answer 2

你可以用纯CSS做到这一点:

html {
  width: 100%;
  height: 100%;
}
body {
  min-width: 100%;
  min-height: 100%;
}
div.centeredBlueBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 200px;
  background-color: blue;
}

重要的是要给予具体的(如:300px),而不是得到的(如:auto或30%)值width和height.