一种在CSS中垂直居中div的方法

时间：2023-03-31 12:41:28 CSS

*{填充：0px；边距：0px；}身体{高度：100%；溢出：隐藏；}.father{位置：绝对；高度：500px；宽度：100%；背景颜色：#2AABD2；{位置：绝对；顶部：50%；左：50%；背景色：红色；宽度：100px；高度：100px；边距：-50px00-50px；}绝对定位实现的居中代码如下：居中*{填充：0px；边距：0px；}身体{高度：100%；溢出：隐藏；}.father{位置：绝对；高度：500px；宽度：100%；背景颜色：#2AABD2；{位置：绝对；顶部：50%；左：50%；背景色：红色；宽度：100px；高度：100px；边距：-50px00-50px；}

</body>效果图如下：使用flex垂直居中居中*{padding:0px;边距：0px；}身体{高度：100%；溢出：隐藏；}.father{高度：500px；宽度：100%；柔性;justify-content:center;/*实现水平居中*/align-items:center;/*实现垂直居中*/}.children{background-color:red;宽度：100px；高度：100px；}