CSS 布局-水平居中

一、水平居中

1、行内元素水平居中

父级元素设置text-align: center  ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中

<div class="parent">
    <div class="child">dome</div>
</div>
<style>
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;
    }
</style>
//由此可见，块级里面的块级元素水平居中也可以先把里面的块级设置成行内块元素

2、块级元素的水平居中

（1）、设置左右外边距为auto，margin：0 auto;

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

（2）、使用table+margin，即子元素设置为块级表格来表示，在设置水平居中

.child{
    display: table;
    margin: 0 auto;
}

（3）、使用absolute+transform

<div class="parent">
    <div class="child">dome</div>
</div>
<style>
    .parent{
        display: relative;
    }
    .child{
        display: absolute;
        left: 50%;
        transform: translateX(-50%);  //考虑兼容性，需加前缀
    }
</style>
//先将父级元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父级元素的一半，最后通过向左移动子元素的一半宽度以达到水平居中

 （5）、使用flex+margin

.parent{
    display: flex;
}
.child{
    margin: 0 auto;
}

3、多块级水平居中

（1）、利用flex布局

 <style>
        #container {
            display: flex;
            justify-content: center;
        }
    </style>
    <div id="container">
        <div class="item">
            item1
        </div>
        <div class="item">
            item2
        </div>
        <div class="item">
            item3
        </div>
        <div class="item">
            item4
        </div>
    </div>

（2）、利用inline-block,即当行内元素处理

#container {
    text-algin: center;
}
.item {
    display: inline-block;
}

4、浮动元素水平居中

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

对于不定宽的浮动元素，父子容器都用相对定位

通用方法(不管是定宽还是不定宽)：flex布局

①定宽的浮动元素

通过子元素设置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>

5、绝对定位元素水平居中

<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*/

    }