块元素水平垂直居中

1. 使用flex布局将子元素水平垂直居中

<style>
            #fa{
                width: 300px;
                height: 300px;
                background-color: #00FFFF;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .center{
                width: 100px;
                height: 100px;
                background-color: rosybrown;
            }
</style>

2. 使用position定位

#div{
  position:absolute;
  left:50%;
  top:50%；
  transform: translate(-50%,-50%);
}

或

div{
  width: 200px;
  height: 150px;
  border: 1px solid aqua;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
            }