css实现水平垂直居中的方法

方法不唯一，此处只列出七种方式

---

第一种方法：利用margin

前提：父元素和子元素都设置了宽高

 给父元素设置border避免外边距合并问题;
margin-top/margin-bottom = (父height-子height)/2;
 margin-left/margin-right = (父width-子width)/2或者为auto；

<div class="outer">
    <div class="inner">aaa</div>
</div>

 	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      border: 1px solid red;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      margin: 150px 200px;
    }

---

第二种方法：利用定位：子绝父相

前提：父元素和子元素都设置了宽高

给父元素设置position:relative;
子元素设置position：absolute
子元素设置偏移量：top、bottom、left、right都为0
子元素设置margin:auto

<div class="outer">
    <div class="inner">aaa</div>
</div>

.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

---

第三种方法：利用定位：子绝父相

前提：父元素和子元素都设置了宽高

给父元素设置position:relative;
子元素设置position：absolute
子元素设置偏移量：top/bottom=50%、left/right=50%
子元素设置margin-left=-子元素width/2、margin-top=-子元素height/2

<div class="outer">
    <div class="inner">aaa</div>
</div>

    .outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -100px;
    }

---

第四种方法：利用伸缩盒/网格布局

父元素设置display:flex;或者display:grid;
父元素设置justify-content:center;
父元素设置align-items:center;

<div class="outer">
    <div class="inner">aaa</div>
</div>

第一种情形：父子都设置宽高

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
    }

第二种情形：父设置宽高，子是行内或者块级不设置宽高

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .inner {
      background-color: skyblue;
    }

---

第五种方法：利用伸缩盒/网格布局

给父元素设置display:flex/grid;
给子元素设置：margin:auto;

<div class="outer">
    <div class="inner">aaa</div>
</div>

第一种情形：父子都设置宽高

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      margin: auto;
    }

第二种情形：父设置宽高，子是行内或者块级不设置宽高

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
    }

    .inner {
      background-color: skyblue;
      margin: auto;
    }

第六种方法：利用定位以及平移：子绝父相

  给父元素设置position:relative;
  给子元素设置：position:absolute;
  子元素设置偏移量：top: 50%;  left: 50%;
  子元素设置transform: translateX(-50%) translateY(-50%)

<div class="outer">
    <div class="inner">aaa</div>
</div>

第一种情形：父子都设置宽高

    .outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .inner {
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

第二种情形：父设置宽高，子是行内或者块级不设置宽高

    .outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .inner {
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

第七种方法：利用margin和平移

  给父元素设置border防止外边距合并;
  给子元素设置：
  margin-left: 50%;margin-top: 50%;
  子元素设置transform: translateX(-50%) translateY(-50%);

第一种情形：父子都设置宽高

<div class="outer">
    <div class="inner">aaa</div>
</div>

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      border: 1px solid red;
    }

    .inner {
      width: 100px;
      height: 200px; 
      background-color: skyblue;
      transform: translateX(-50%) translateY(-50%);
      margin-left: 50%;
      margin-top: 50%;
    }

第二种情形：父设置宽高，子是块级元素但不设置宽高
注意：此时子元素会在父元素中水平垂直居中，但子元素的宽度会变为父元素的一半，高度由内容撑开

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      border: 1px solid red;
    }

    .inner {
      background-color: skyblue;
      transform: translateX(-50%) translateY(-50%);
      margin-left: 50%;
      margin-top: 50%;
    }

当子元素是行内元素时

利用text-align以及line-height

<div class="outer">
    <span class="inner">aaa</span >
</div>

	.outer {
      width: 500px;
      height: 500px;
      background-color: pink;
      text-align:center;
      line-height:500px;
    }

    .inner {
      background-color: skyblue;
    }