CSS水平垂直居中

子元素作为行内元素时：

HTML部分：

    <div class="parent_box">
        <span>行内元素</span>
    </div>

CSS部分：

1. 使用text-align:center水平居中，再将行内元素的line-height属性设置为父元素的高度

.parent_box{
    width: 200px;
    height: 200px;
    text-align: center;
  }
  span{
    line-height: 200px;
  }

2. 将父元素变为table元素

  .parent_box{
    width: 200px;
    height: 200px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  span{
    display: inline-block;
  }

 

子元素作为块元素时：

已知父元素和子元素大小

HTML部分：

  <div class="parent_box">
    <div class="child_box">
    </div>
  </div>

CSS部分：

1.使用position定位，将top和left都设置成50%，再使用margin-left取子元素宽的一半，margin-top取子元素高的一半，取负数，恢复偏移

  .parent_box{
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child_box{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }

2.设置position各个方向都为0，然后margin设为auto

  .parent_box{
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child_box{
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

3.使用了calc对子元素进行偏移

.parent_box{
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child_box{
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }

 

不需要知道子元素的宽和高

1.通过transform属性的translate进行偏移，参数分别为子元素宽和高的一半

.parent_box{
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

position:fixed水平居中

#Box{
    width: 400px;
    height: 300px;
    position: fixed;
    left: 0;
    right: 0;
    margin:0 auto;
}

不管子元素是行内还是块

1.flex布局

  .parent_box{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

2.grid布局：子元素不管是行内还是块，不设宽都会独占一行（宽度和父元素相同）

.parent_box{
    width: 200px;
    height: 200px;
    display: grid;
  }
  .child_box{
    align-self: center;
    justify-content: center;
  }