前端布局总结--居中

居中

• 水平居中

text-align和inline-block

.parent{
	text-align:center;
}
.child{
	display:inline-block;
}

确定width的值，设置margin:0 auto

width：100px;
margin:0 auto;

• 垂直居中

设置相同的height和line-height(针对行内元素的文字)

height:100px;
line-height:100px;

• 水平垂直居中

绝对定位

1.已知宽高

position:absolute;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;

2.未知宽高

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

flex

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

来源：oschina

链接：https://my.oschina.net/u/3986435/blog/3058790