css实现垂直居中的几种方式

82 阅读1分钟
  1. 通过flex布局实现效果
.parent{
    display:flex;
    justify-content: center;
    align-items: center;
}
或者
.parent{
    display:flex;
}
.child{
    margin:auto
}
  1. 通过定位实现效果 该方法子元素需要设置宽高 具体代码实现如下:
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
    width: 50px;
}