CSS 垂直居中的方式
垂直居中
自己整理一下收集到的垂直居中的方式:
table自带居中功能
<table> <tr> <td> <div>表格垂直居中</div> </td> </tr> </table>
<div class="like-table"> <div>假的表格垂直居中</div> </div>
.like-table{ display:table-cell; }
- 设定行高 适用于「单行」的「行内元素」 ( inline、inline-block ),将line-height设成和高度一样的数值,则内容的行内元素就会被垂直置中。
设定伪类元素使用伪元素的方式。在此之前,先解释一下 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。这个属性是加在容器内部较高的元素上, 使其基线相对保持在较高元素中间,因此,如果有一个方块变成了高度100%,那么其他的方块就会真正的垂直居中。所以使用伪类的方式,
<div class="parent"> <div class="child"> 一串文字 </div> </div> .parent{ text-align: center; } .child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; } .parent:before{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; } .parent:after{ content:''; outline: 3px solid red; display: inline-block; height: 100%; vertical-align: middle; }
margin: auto
<div class="parent"> <div class="child"> 一串文字 </div> </div> .parent{ height: 600px; position: relative; } .child{ position: absolute; width: 300px; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
margin-top:-50%
<div class="parent"> <div class="child"> 一串文字 </div> </div> .parent{ height: 600px; position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
transform
.parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 100px; margin-top: -50px; }
flex布局
.parent{ display: flex; justify-content: center; align-items: center; }
grid布局
.parent{ display:grid; justify-content:center; align-content:center; }
转载自:https://segmentfault.com/a/1190000041202385