元素垂直水平居中的几种方法

已知宽高：

1、利用绝对定位盒模型的特性；

绝对定位的盒模型有以下特性：

left+right+width+水平方向的margin+padding=包含块的width；
top+bottom+height+垂直方向的margin+padding=包含块的height；

代码示例：

#parent{
      /* 父相子绝 */
      position: relative;
      /* 包含块的宽高必须是已知的 */
      width: 200px;
      height: 200px;
      border: 1px solid;
    }
    #child {
      /* 需要居中的元素绝对定位 */
      position: absolute;
      /* 居中的元素宽高要已知 */
      width: 50px;
      height: 50px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: pink;
    }

2、利用margin为赋值进行反向偏移；

代码示例：

#parent{
      /* 父相子绝 */
      position: relative;
      /* 包含块的宽高必须是已知的 */
      width: 200px;
      height: 200px;
      border: 1px solid;
    }
    #child {
      /* 需要居中的元素绝对定位 */
      position: absolute;
      /* 居中的元素宽高要已知 */
      width: 50px;
      height: 50px;
      left: 50%;
      top: 50%;
      /* 元素向左和向上偏移自身宽高的一般 */
      margin-left: -25px;
      margin-top: -25px;
      background-color: pink;
    }

未知宽高

1、元素未设置宽高，宽高由内容撑开，利用transform来进行自身反向偏移；

代码示例：

#parent{
      /* 父相子绝 */
      position: relative;
      /* 包含块的宽高必须是已知的 */
      width: 200px;
      height: 200px;
      border: 1px solid;
    }
    #child {
      /* 需要居中的元素绝对定位 */
      position: absolute;
      /* 元素未设宽高，宽高由内容撑开 */
      left: 50%;
      top: 50%;
      /* 元素向左和向上偏移自身宽高的一般 */
      transform: translate3d(-50%,-50%,0);
      background-color: pink;
    }

2、利用flex来布局

代码示例：

#parent{
      /* 父相子绝 */
      position: relative;
      /* 包含块的宽高必须是已知的 */
      width: 200px;
      height: 300px;
      display: flex;
      /* 设置项目主轴方向为居中,默认主轴方向为水平 */
      justify-items: center;
      /* 设置项目辅轴方向为居中，默认辅轴方向为垂直方向 */
      align-items: center;
      border: 1px solid;
    }
    #child {
      /* 需要居中的元素绝对定位 */
      position: absolute;
      /* 元素未设宽高，宽高由内容撑开 */
      left: 50%;
      top: 50%;
      /* 元素向左和向上偏移自身宽高的一般 */
      transform: translate3d(-50%,-50%,0);
      background-color: pink;
    }