HTML水平居中布局

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