垂直水平居中的实现方式有哪些?
- 父级设置
text-align: center和line-height等同高度。 - 子节点绝对定位,设置
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); - 子节点绝对定位,需要设置宽度和高度。设置
position:absolute;top:0;left:0;right:0;bottom:0;margin:auto; - 父级设置
display: table,子节点设置display:table-cell;text-align:center;vertical-align:middle; - 父级设置
display: flex;justify-content:center;align-items:center; - 父节点设置
display: grid;,子节点设置:align-self:center;justify-self: center;