如果想要元素左右对其的方法可以使用 float、flex、position 块级元素左右居中 margin 0 auto； 内联元素 父级元素 text-align center 而垂直水平居中呢？
... .
如果想要元素左右对其的方法可以使用 float、flex、position
块级元素左右居中 margin 0 auto；
内联元素 父级元素 text-align center
而垂直水平居中呢？
1.position
html
.<div class="center">test</div>.
元素已知宽和高css
..center { background: red; width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } /* or */ .center { background: red; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; }.
元素宽高未知css
..center { color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }.
2.flex布局
html
.<div class="wrap"> <div class="item">test</div></div>.
css
..wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .item { color: red; }.
3.使用伪类
html
.<div class="wrap"> <div class="item">test</div></div>.
css
..wrap { width: 100%; height: 100%; background-color: #009ef4; text-align: center; position: absolute; top: 0; left: 0; } .wrap:after { display: inline-block; content: ‘‘; width: 0; height: 100%; vertical-align: middle; } .item { color: red; display: inline-block; vertical-align: middle; }.
4.使用表格
html
.<div class="wrap"> <div class="item"> test </div> </div>.
css
..wrap { width: 100%; height: 100vh; display: table; } .item { color: #F00; display: table-cell; vertical-align: middle; text-align: center; }. . .. ...
