【CSS】元素水平垂直居中

#偶然发现这个点还蛮有意思，其实讲了挺多年的，但使用上，冬瓜豆腐，各有所好，特此记录

定位+margin

这个方式，大学期间用的最多，但margin: auto确实好用hhh

父元素

position: relative;

子元素

position: absolute;
margin: 0 auto;

定位+transform

基本没用过

父元素

position: relative;

子元素

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

flex布局

工作中最常用，屡见不鲜

父元素

display: flex;
align-items: center; // 垂直方向
justify-content: center; // 水平方向

grid布局

也有使用，出现频率不及flex

 父元素

display: flex;
align-items: center; // 垂直方向
justify-content: center; // 水平方向

table布局

没用过，也没见其他人使用，了解一下吧

 父元素

display: table-cell;
text-align: center;
vertical-align: middle;

子元素

display: inline-block;