一、使用Flex布局
Flex布局是许多网页设计师都喜欢使用的一种方法。它使水平和垂直居中对齐非常简单。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
在上面的代码中，将父元素的display属性设置为flex，然后使用justify-content和align-items属性分别设置水平和垂直对齐方式为中心。这样，子元素将自动在父元素中水平垂直居中。下面是一个完整的例子：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child {
width: 200px;
height: 200px;
background-color: blue;
}原创文章，作者：AZDP，如若转载，请注明出处：https://www.506064.com/n/132517.html
微信扫一扫 
支付宝扫一扫 