CSS居中总结

水平居中

行内元素

text-align: center;

块级元素

margin: 0 auto;//定宽

//给子元素设置table+margin(不定宽)
display: table;
margin: 0 auto;

//position+transform
position: absolute;
left: 50%;//右移父元素宽度的一半
transform: translateX(-50%);//左移子元素自身大小的一半

//flex
display: flex;//默认主轴为横轴
justifu-content: center;//在横轴方向的对齐方式

垂直居中

行内元素

//单行居中
height: 120px;
line-height: 120px;

//多行居中
display: table-cell;//父元素要设置display: table
vertical-align: middle;

//flex
display: flex;
flex-direction: column;
justify-content: center;

块级元素

//flex+ align-items
diaplay: flex;
align-items: center;

//position+transform
position: absolute;
top: 50%;
tranform: translateY(-50%);

//table+vertical-align
display: table-cell;
vertical-align: middle;

水平垂直居中

行内元素

//text-align + line-height/vertical-align

块级元素

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

//flex
display: flex;
align-items: center;
justifu-content: center;

//position + margin(定宽)
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

//grid
display: grid;//父级元素
margin: auto;//子元素