html div 垂直居中对齐的几种方式

html div 垂直居中对齐的几种方式

<div class="parent">
	<div class="child"></div>
</div>

方式1 position, transform, 需要父子属性共同决定

    .parent{
      position: relative;
      height: 100%;
    }
    .child{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      
      width: 300px;
      height: 200px;
      background-color: blue;
    }

方式2 flex布局 只需要父属性设置即可

    .parent{
        display: flex;
  		justify-content: center;
  		align-items: center;
  		height: 100%;
    }
    .child{
      width: 300px;
      height: 200px;
      background-color: blue;
    }