如何水平居中一个元素

主要介绍水平居中，垂直居中，水平垂直居中的各种办法：

行内元素水平居中

    .parent{/*在父元素设置*/
        text-align: center;
    }

• 如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素达到水平居中

    <div class="parent">
        <div class="child">Demo</div>
    </div>
    <style>
        .parent{
        text-align:center;
        }
        .child {
        display: inline-block;
        }
    </style>
  

块级元素水平居中

这种情形有多种实现方式

• 将该块级元素的左右外边距margin-left和margin-right设置为auto

  .child{
      width: 100px;//确保该块级元素定宽
      margin:0 auto;
  }
  

• 使用table+margin
  先将子元素设置为块级表格来显示，再将其设置水平居中
  display:table在表现上类似block元素，但是宽度为内容宽

    <div class="parent">
        <div class="child">Demo</div>
    </div>
    <style>
        .child {
        display: table;
        margin: 0 auto;
        }
    </style>
  

• 使用absolute+transform
  先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一般，最后通过向左移动子元素的一般宽度以达到水平居中

    <div class="parent">
        <div class="child">Demo</div>
    </div>
    <style>
        .child {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        }
        .parent {
        position:relative;
        }
    </style>
  

• 使用flex+justify-content
  通过CSS3中的布局利器flex中的justify-content属性来达到水平居中

    <div class="parent">
        <div class="child">Demo</div>
    </div>
    <style>
        .parent {
        display: flex;
        justify-content:center;
        }
    </style>
  

• 使用flex+margin
  通过flex将父容器设置为Flex布局，再设置子元素居中

    <div class="parent">
        <div class="child">Demo</div>
    </div>
    <style>
        .parent {
        display: flex;
        }
        .child {
        margin:0 auto;
        }
    </style>
  

多个块级元素水平居中

• 利用flex布局
  利用弹性布局（flex），实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式

  #container {
      display: flex;
      justify-content: center;
  }
  

-利用inline-block
将要水平排列的块级元素设置为display:inline-boock，然后在父元素上设置text-align:center，达到与上面行内元素的水平居中一样的效果

    .container {
        text-align: center;
    }
    .inline-block {
       display: inline-block;
    }

浮动元素水平居中

• 对于定宽的浮动元素，通过子元素设置relative + 负margin

    .child {
        position:relative;
        left:50%;
        margin-left:-250px;
    }
    <div class="parent">
      <span class="child" style="float: left;width: 500px;">我是要居中的浮动元素</span>
    </div>
  

• 对于不定宽的浮动元素，父子容器都用相对定位
  注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素

    <div class="box">
            <p>我是浮动的</p>
            <p>我也是居中的</p>
        </div>
        .box{
            float:left;
            position:relative;
            left:50%;
        }
        p{
            float:left;
            position:relative;
            right:50%;
        }
  

• 通用方法(不管是定宽还是不定宽)：flex布局
  利用弹性布局(flex)的justify-content属性，实现水平居中。

    .parent {
        display:flex;
        justify-content:center;
    }
    .chlid{
        float: left;
        width: 200px;//有无宽度不影响居中
    }
    <div class="parent">
      <span class="chlid">我是要居中的浮动元素</span>
    </div>
  

绝对定位元素水平居中

通过子元素绝对定位，外加margin: 0 auto来实现

    <div class="parent">
            <div class="child">让绝对定位的元素水平居中对齐。</div>
        </div>
          .parent{
                position:relative;
            }
           .child{
                 position: absolute; /*绝对定位*/
                 width: 200px;
                 height:100px;
                 background: yellow;
                 margin: 0 auto; /*水平居中*/
                 left: 0; /*此处不能省略，且为0*/
                 right: 0;/*此处不能省略，且为0*/
            }