CSS基础--居中

居中：

定宽高适用

absolute+负margin

position:absolute;
top:50%;
left:50%;
margin-left:-50px;/*子元素宽度的一半的负值*/
margin-top:-50px;/*子元素宽度的一半的负值*/
//缺点是需要知道子元素的宽度

absolute+margin auto

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;

absolute+clac

//减去宽度的一半
position:absolute;
top:calc(50%-50px);
left:calc(50%-50px);

不定宽高

absolute+transform

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

lineheight

//设置为行内元素，text-align:center;
//vertical-align:middle;
//display:inline-block;

writing-mode改变文字显示方向

//居中
.first {
writing-mode:vertical-lr;//垂直
text-align:center;
}
.second {
writing-mode:horizontal-tb;
display:inline-block;
text-align:center;
width:100%;
}
.thrid {
display:inline-block;
margin:auto;
text-align;
}

table,少用

css-table

.wp{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.box{
dispaly:inline-block;
}

flex

display:flex;
justify-content:center;
align-items:center;

grid

display:grid;//网格


align-self:center;
justify-self:center;