HTML元素水平居中方法详解

前言:有许多方法可以实现HTML页面元素水平居中显示，本篇博客我列举一下自己所知道的方法，如果有缺少的，欢迎大家回复。
一、text-align
适应范围：所有元素
在块级元素，如div中，设置其 text-align:center; 可以使其文本内容居中。
因此，若要实现子元素在父元素水平居中显示，便可以设置父元素的 text-align:center;
示例代码如下：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        height:200px;
        text-align:center;
        border:1px solid black;
        padding:20px;
    }
    .div21{
        display:inline-block;
        width:100px;
        height:50px;
        border:1px solid black;
    }
    </style>

二、margin
适应范围：块级元素
子块级元素在父元素中水平居中显示，使用的最多的属性大概就是margin了，设置子块级元素的 margin:0px auto;
示例代码如下所示：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        height:200px;
        border:1px solid black;
        padding:20px;
    }
    .div21{
        width:100px;
        height:50px;
        margin:0px auto;
        border:1px solid black;
    }
    </style>

三、position + margin
1、适用范围：所有元素(该子元素的宽度已知)
这里假设子元素的宽度为100px
示例代码如下所示：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        height:200px;
        border:1px solid black;
        padding:20px;
        position:relative;
    }
    .div21{
        width:100px;
        height:50px;
        margin-left:-50px;
        position:absolute;
        left:50%;
        border:1px solid black;
    }
    </style>

2、适用范围：所有元素(该子元素的宽度可以未知)

示例代码如下所示：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        position:relative;
        height:600px;
        border:1px solid black;
        padding:20px; 
    }
    .div21{
        position:absolute;
        width:100px;
        height:50px;
        left:0;
        right:0;
        margin:auto;
        border:1px solid black;
    }
    </style>

四、position + transform
适用范围：所有元素(子元素的宽度不确定)
这里假设子元素的宽度为100px
以前的方法，可以在js中获取该子元素的宽度，然后像第三种方法那样解决。
但是使用CSS3的新属性transform可以不需要js获取子元素的宽度
示例代码如下所示：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        height:200px;
        border:1px solid black;
        padding:20px;
        position:relative;
    }
    .div21{
        width:100px;
        height:50px;
        transform:translate(-50%,0);
        position:absolute;
        left:50%;
        border:1px solid black;
    }
    </style>

五、弹性伸缩布局 display:flex;
适应范围:所有元素(子元素的宽度不确定)
示例代码如下所示：

    <div class="div2">
        <div class="div21">测试内容，仅供测试使用</div>
    </div>
    <style>
    .div2{
        height:200px;
        border:1px solid black;
        padding:20px;
        display:flex;
        justify-content:center;
    }
    .div21{
        width:100px;
        height:50px;
        border:1px solid black;
    }
    </style>

html元素垂直居中请参考：设置页面元素垂直居中的几种方法