整理一下关于块和文字的水平垂直居中,这些是我们平时调样式时经常遇到的。
dom结构,在浏览器中实现块及其文字的水平垂直居中
<body> <div class="parent"></div> </body>共同样式:
* { margin: 0; padding: 0; }
方法1:
.parent { width: 200px; height: 200px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid; }
方法2:
.parent { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; border: 1px solid }方法3(不知宽高的情况下):.parent { width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid; }方法4:body { display:flex; justify-content:center; align-items: center; height: 400px; } .parent { width: 200px; height: 200px; border: 1px solid; }方法5:body{ display: table-cell; vertical-align: middle; width: 500px; height: 500px; border: 1px solid; } .parent { width: 200px; height: 200px; border: 1px solid; margin: 0 auto; }