（给前端大全加星标，晋升前端技艺）
做家：前端工匠公号/浪里行舟（本文来自做家投稿）
引子本文要紧先容水准居中，笔直居中，尚有水准笔直居中百般法子，思惟导图以下：
一、水准居中1.行内元素水准居中哄骗txt-align:cntr能够完成在块级元素内部的行内元素水准居中。此办法对inlin、inlin-block、inlin-tabl和inlin-flx元素水准居中都有用。
.parnt{//在父容器配置
txt-align:cntr;
}
其余，假若块级元素内部包着也是一个块级元素，咱们能够先将其由块级元素变动成行内块元素，再经过配置行内块元素居中以抵达水准居中。
divclass="parnt"
divclass="child"Dmo/div
/div
styl
.parnt{
txt-align:cntr;
}
.child{
display:inlin-block;
}
/styl
2.块级元素的水准居中这类景遇能够有多种完成方法，底下咱们详细先容:
①将该块级元素左右外边距margin-lft和margin-right配置为auto.child{
width:px;//保证该块级元素定宽
margin:0auto;
}
②行使tabl+margin先将子元素配置为块级表格来显示（宛如），再将其配置水准居中
display:tabl在呈现上宛如block元素，然则宽度为体例宽。
divclass="parnt"
divclass="child"Dmo/div
/div
styl
.child{
display:tabl;
margin:0auto;
}
/styl
③行使absolut+transform先将父元素配置为相对定位，再将子元素配置为绝对定位，向右挪动子元素，挪动间隔为父容器的一半，着末经过向左挪动子元素的一半宽度以抵达水准居中。
divclass="parnt"
divclass="child"Dmo/div
/div
styl
.child{
position:absolut;
lft:50%;
transform:translatX(-50%);
}
.parnt{
position:rlativ;
}
/styl
不过transform属于css3体例，兼容性存在必定题目，高版本涉猎器需求增加一些前缀。
④行使flx+justify-contnt经过CSS3中的布局利器flx中的justify-contnt属性来抵达水准居中。
divclass="parnt"
divclass="child"Dmo/div
/div
styl
.parnt{
display:flx;
justify-contnt:cntr;
}
/styl
⑤行使flx+margin经过flx将父容器配置为为Flx布局，再配置子元素居中。
divclass="parnt"
divclass="child"Dmo/div
/div
styl
.parnt{
display:flx;
}
.child{
margin:0auto;
}
/styl
3.多块级元素水准居中①哄骗flx布局哄骗弹性布局(flx)，完成水准居中，个中justify-contnt用于配置弹性盒子元素在主轴（默许横轴）方位上的对齐方法，本例中配置子元素水准居中显示。
#containr{
display:flx;
justify-contnt:cntr;
}
源代码演示