前端佈局總結--居中

居中

• 水平居中

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;