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: 200px;
            background-color: brown;
            /*
            display属性：翻译为 陈列，展出，显示，也就是用来修改元素的显示类型
            block：块级元素
            inline：内联元素（text-align属性有效）
            inline-block：行内块级元素（块级+内联）
            */
            display: inline-block;
        }

 <!--定义一个父元素-->
    <div class="parent">
        <!--定义一个子元素-->
        <div class="son">
            居中对齐
        </div>
    </div>

在这里插入图片描述

优点：

浏览器兼容器比较好

缺点：

text-align具有继承性，会导致子元素的文本也是居中对齐。

解决方案：

在子元素的样式中再重新设置text-align属性

table + margin

先设置display为table

再利用margin：0 auto;使子元素对于父元素居中对齐

auto：根据浏览器自动分配，对父元素左右外边距进行平均分。

.son {
    
    
            width: 200px;
            height: 200px;
            background-color: brown;

    		/*
    		display设置为block也可以居中对齐，div默认就是block。
    		*/
            display: table;
            /*
            margin属性：外边距
            一个值-上右下左（顺时针）
            二个值-第一个表示上下，第二个表示左右
            三个值-第一个表示上，第二个表示左右，第三个表示下
            四个值-上右下左（顺时针）
            auto-表示根据浏览器自动分配
            */
            margin: 0 auto;
        }

body同上个方法一样

在这里插入图片描述

优点：

只需要对子元素进行设置就可以实现水平居中效果。

缺点：

如果子元素脱离文档流，会导致margin属性的值无效。

脱离文档流：

将元素设置为float（浮动）

将元素设置为absolute（绝对定位）

将元素设置为fixed（固定定位）

absolute + transform

利用absolute（绝对定位）和transform属性

 		.parent {
    
    
            width: 100%;
            height: 200px;
            background-color: antiquewhite;

            position: relative;
            /*对父元素设置相对定位*/ 
        }

        .son {
    
    
            width: 200px;
            height: 200px;
            background-color: brown;

            position:absolute;
            /*
            当把当前元素设置为绝对定位之后：
            如果父元素没有设置定位的话，当前元素是相对于页面定位的
            如果设置了的话，当前元素是相对于父元素定位的
            */
            left: 50%;
            /*使子元素的左边离父元素的左边距离为（50%的父元素宽度）*/
            transform: translateX(-50%);
            /*使元素左移自己50%宽度的距离 */
        }

body同第一个方法一样
在这里插入图片描述

优点：

父元素是否脱离文档流，都不影响子元素水平居中效果

缺点：

transform属性是CSS3 中的新增属性，浏览器的支持情况可能会不好