CSS 九种方法实现居中

grid 布局

方法一

父元素使用 grid 布局，然后加上align-items:center;``justify-items:center;

<style>
    .box{
      width:100px;
    height:100px;
    border:1px solid red;
    display:grid;
    align-items:center;
    justify-items:center;
  }
  .child{
    background:green;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/tasucaruya/edit?html,output

方法二

父元素使用 grid 布局，给子元素加上margin:auto;

<style>
    .box{
      width:100px;
    height:100px;
    border:1px solid red;
    display:grid;
  }
  .child{
    background:green;
    margin:auto;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/yokiwisura/edit?html,output

flex 布局

方法一

父元素使用 flex 布局，然后加上justify-content:center;``align-items:center;

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .child{
    background:green;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/guyezuzewe/edit?html,output

方法二

父元素使用 flex 布局，子元素加上margin:auto

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    display:flex;
  }
  .child{
    background:green;
    margin:auto;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/gowokagiko/edit?html,output

绝对定位

方法一

父元素使用相对定位，子元素使用绝对定位，然后给子元素加上left:50%;``top:50%;``transform:translate(-50%,-50%)

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    position:relative;
  }
  .child{
    background:green;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/tezenomobe/edit?html,output

方法二

父元素使用相对定位，子元素使用绝对定位，然后left:50%;``top:50%;，在使用这种方法时最好写死子元素的宽高，这样能更准确的居中。然后加上margin-left:-1/2width;``margin-top:-1/2height;

    <style>
  .box{
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
}
  </style>
  <div class="box">
    <div class="child">
       奥特曼
    </div>
  </div>

https://jsbin.com/jacusekesi/edit?html,output

方法三

当父元素使用相对定位，子元素使用绝对定位时，如果使left:0;``top:0;``right:0;``bottom:0;在不写宽高的情况下子元素将会充满整个容器，加上宽高后，它就会跑到容器的左上角。这时我们再给子元素加上margin:auto;它就会内收到居中的位置

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    position:relative;
  }
  .child{
    background:green;
    width:50px;
    height:30px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/nomatadidu/edit?html,output

table-cell

父元素加上display:table-cell;然后vertical-align: middle;``text-align:center;因为父类使用了display:table-cell;所以要把子类变成行内块级元素即给子元素加上display:inline-block;

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    display:table-cell;
    vertical-align: middle;
    text-align:center;
  }
  .child{
    background:green;
    display:inline-block;
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/rozesizubu/edit?html,output

line-height

这种方法是创建了一个伪元素，这个伪元素相当于一个文字加在子元素的后面，这个文字的内容是content:""里面的内容，这个字的高度正好和容器一样高，那么子元素和我们的伪元素要并排到一起，所以就达成了让子元素居中的目的。

<style>
  .box{
    width:100px;
    height:100px;
    border:1px solid red;
    text-align:center;
  }
  .box::after{
    content:"";
    line-height:100px;
  }
  .child{
    display:inline-block;
    background:green
  }
</style>
<div class="box">
  <div class="child">奥特曼</div>
</div>

https://jsbin.com/jovorivuwe/edit?html,output