水平居中方法总结

行内元素水平居中

1. text-align：center  （在父元素容器上添加）
2. 对块级元素转换成 行内元素再使用text-align

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

块级元素水平居中

1. 将块级左右外边距设置为 auto  【margin：auto】
2. 元素设置为table +margin：outo

   .child{
       display:table//相当于block 只是宽度与内容相同
       margin:auto
   }

3.  absolute+transfrom

   // 将需要居中的元素设置为绝对定位，走到父元素的50% 由于原点在左下角，所以要通过transform往回走居中元素的一半
    .child {
       position:absolute;
       left:50%;
       transform:translateX(-50%);
     }
     .parent {
       position:relative;
     }

4.  flex布局+justify-content:center

   .parent{
       display: flex;
       background: pink;
       width: 300px;
       height: 200px;
       margin:0 auto;
       justify-content:center;//让子元素进行居中
       
   }
   
   .child{
       display: flex;
       width: 100px;
       height: 100px;
       background: palegoldenrod;
      justify-content: center;
   
   }

5. flex+margin   [父元素设置为flex 子元素margin：auto]

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

多个块级元素水平居中

1. 父元素flex + justify-content:center

2. 子元素display：inline-block（一行） 父元素：text-align：center

浮动元素水平居中

定宽浮动元素

   <div class="parent">
        <div class="child">Demo</div>
   </div>
<style>
.parent{
    background: pink;
    height: 200px;
}

.child{
    position: relative;
    left: 50%; 
    margin-left: -150px;
    float: left;
    width: 300px;
    height: 100px;
    background: palegoldenrod;

} 
</style>

不定宽浮动元素

1. 通过父子容器相对定位实现

   <div class="box">
       <p>我是浮动的box</p>
       <p>我也是居中的box</p>
   </div>
   <style>
   .box{
       float:left;//父元素也浮动高度就不会塌陷，并且宽度跟子元素变化
       position:relative;
       //父元素按原来的位置走50%
       left:50%;
   }
   p{
       float:left;
       position:relative;
       //子元素在走了50%之后往后挪动元素的50%
       right:50%;
   }
   </style>

2. flex+justify-content（通用水平居中方法）【父元素添加】

绝对定位水平居中

子绝父相+margin：0 auto

 <div class="parent">
        <div class="child">Demo</div>
    
 </div>
<style>
.parent{
    position: relative;
    background: pink;
    height: 200px;
}

.child{
    position: absolute;
    width: 300px;
    height: 100px;
    background: palegoldenrod;
    margin: auto;
    left: 0;
    right: 0;
}
</style>