HTML水平居中布局
水平居中布局就是指当前元素在父级元素容器中,水平方向是居中显示的
实现方法:
- inline-block + text-align 属性配合使用
- table + margin 属性配合使用
- absolute + transform 属性配合使用
inline-block + text-align
这是个成熟的水平居中解决方案
利用text-align
把具有inline
属性(内联属性)的元素进行居中对齐
.parent {
width: 100%;
height: 200px;
background-color: antiquewhite;
/*
text-align属性:翻译过来就是字体排列,所以这是用来为文本内容设置对齐方式的。
left:左对齐
center:居中对齐
right:右对齐
*/
text-align: center;
}
.son {
width: 200px;
height: 200