Flex 布局实现子项的完全居中

利用 Flex 布局的灵活性可以非常简洁的实现子元素相对于父元素的完全居中

父容器指定宽高,并指定为 Flex 布局

  1. 为父容器添加 justify-content: center; 表示子元素位于主轴水平居中
  2. 为父容器添加 align-items: center; 表示子元素位于交叉轴垂直居中
1
2
3
4
5
6
7
8
9
#container {
    width: 500px;
    height: 700px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    background-color: red;
}

子元素指定宽高即可

1
2
3
4
5
#container .top-content {
    width: 200px;
    height: 200px;
    background-color: green;
}