【css】多种方式实现水平居中（持续更新）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lsy1072/article/details/86075772

水平居中

水平居中在布局的时候经常用到，水平居中主要分两种情况，一种是已知宽度居中，未知宽度居中。

已知宽度居中

如果已知元素宽度，那水平居中会非常简单，使用margin:auto即可实现

1. margin:auto
   css:

.margin-middle{
      margin:auto;
      width: 100px;
      height: 200px;
      background-color: #8cc5ff;
    }

html

<div class="margin-middle">已知宽度margin:auto水平居中</div>

未知宽度居中

未知宽度也是比较常用的，实现的方式有多种。
1.float居中
float居中中，父元素和子元素都要这是为float：left，position:relative，不同的是父元素是left：50%，子元素是right：50%。

.float-middle{
      float: left;
      position: relative;
      right: 50%;
    }
    .box{
      float: left;
      /*display: inline-block;或者设置成inline-block*/
      position: relative;
      left: 50%;
    }

<div class="box">
      <div class="float-middle">浮动居中</div>
</div>

2.绝对位置居中
绝对位置居中只需要在子元素中设置absolute，并且left：50%，transform：translateX(-50%)即可实现

.absolute-middle{
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: #8cc5ff;
    }

<div class="box2">
      <div class="absolute-middle">绝对位置居中</div>
 </div>

如果需要相对于父元素居中，则需要在父元素设置position：relative。