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

版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862155

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

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

1. 为父容器添加 justify-content: center; 表示子元素位于主轴水平居中
2. 为父容器添加 align-items: center; 表示子元素位于交叉轴垂直居中

#container {
    width: 500px;
    height: 700px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    background-color: red;
}

子元素指定宽高即可

#container .top-content {
    width: 200px;
    height: 200px;
    background-color: green;
}