在页面上垂直和水平居中<div>的最佳方法是什么？

Question

在页面上垂直和水平居中<div>的最佳方法是什么？<div>在页面上垂直和水平居中元素的最佳方法是什么？我知道这margin-left: auto; margin-right: auto;将以水平为中心，但垂直做的最佳方式是什么？

Answer 1

虽然OP在提出这个问题时没有用，但我认为，至少对于现代浏览器来说，最好的解决方案是使用display：flex或pseudo class。

您可以在以下小提琴中看到一个示例。这是更新的小提琴。

对于伪类，一个例子可能是：

.centerPseudo {
    display:inline-block;
    text-align:center;}.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;}

display：flex的用法，根据css-tricks和MDN如下：

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;}

还有其他可用于flex的属性，这些属性在上面提到的链接中进行了解释，并附有其他示例。

如果你必须支持不支持css3的旧浏览器，那么你应该使用javascript或其他答案中显示的固定宽度/高度解决方案。