CSS居中是Web開發(fā)中最基本的布局之一，也是最常用的。有許多方法可以實(shí)現(xiàn)CSS居中，其中一些最常見的方法被總結(jié)為15中方式：

/* 1. 水平居中方案1 */
.parent{
text-align:center;
}
.child{
display:inline-block;
}
/* 2. 水平居中方案2 */
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform:translateX(-50%);
}
/* 3. 水平垂直居中方案1 */
.parent{
display:flex;
justify-content:center;
align-items:center;
}
/* 4. 水平垂直居中方案2 */
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
/* 5. 水平垂直居中方案3 */
.parent{
display:grid;
}
.child{
justify-self:center;
align-self:center;
}
/* 6. 水平垂直居中方案4 */
.parent{
display:table;
}
.child{
display:table-cell;
vertical-align:middle;
text-align:center;
}
/* 7. 水平垂直居中方案5 */
.parent{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
/* 8. 水平居中 + 底部定位 */
.parent{
position:relative;
}
.child{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
/* 9. 水平居中 + 頂部定位 */
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
/* 10. 圖片水平居中 */
.parent{
text-align:center;
}
.child{
display:inline-block;
vertical-align:middle;
}
/* 11. 橫向滾動(dòng)居中 */
.parent{
display:flex;
justify-content:center;
overflow-x:auto;
}
.child{
flex-shrink:0;
}
/* 12. 垂直方向的多行文本水平居中 */
.parent{
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
}
/* 13. 列表的水平居中 */
.parent{
display:flex;
justify-content:center;
}
.child{
margin:0 10px;
}
/* 14. 水平分布的元素的居中 */
.parent{
display:flex;
justify-content:space-between;
align-items:center;
}
/* 15. 邊框盒內(nèi)部的文本水平居中 */
.parent{
display:table;
}
.child{
display:table-cell;
text-align:center;
vertical-align:middle;
}