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

Question

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

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

我知道这margin-left: auto; margin-right: auto;将以水平为中心，但垂直做的最佳方式是什么？

Answer 1

虽然OP在提出这个问题时没有用，但我认为，至少对于现代浏览器来说，最好的解决方案是使用display：flex或pseudo class。您可以在以下小提琴中看到一个示例。这是更新的小提琴。对于伪类，一个例子可能是：.centerPseudo&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:inline-block; &nbsp;&nbsp;&nbsp;&nbsp;text-align:center;}.centerPseudo::before{ &nbsp;&nbsp;&nbsp;&nbsp;content:''; &nbsp;&nbsp;&nbsp;&nbsp;display:inline-block; &nbsp;&nbsp;&nbsp;&nbsp;height:100%; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:middle; &nbsp;&nbsp;&nbsp;&nbsp;width:0px;}display：flex的用法，根据css-tricks和MDN如下：.centerFlex&nbsp;{ &nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center;}还有其他可用于flex的属性，这些属性在上面提到的链接中进行了解释，并附有其他示例。如果你必须支持不支持css3的旧浏览器，那么你应该使用javascript或其他答案中显示的固定宽度/高度解决方案。