css样式设置div居中

css样式设置div居中

CSS 2024-02-05 23:20:06 1年以前

CSS样式设置div居中,可以通过以下几种方式实现:

//第一种:使用绝对定位与margin实现div居中
div {
position: absolute;
left: 50%;
top: 50%;
margin-left: -【宽度的一半】;
margin-top: -【高度的一半】;
}
//第二种:使用flex布局实现div居中
body {
display: flex;
justify-content: center;
align-items: center;
}
//第三种:使用grid布局实现div居中
body {
display: grid;
place-items: center;
}
//第四种:使用text-align和line-height实现div居中(适用于单行文本)
div {
text-align: center;
line-height: 【父元素高度】;
}

上述4种方式,每种都有其适用场景,需要根据具体需求选择合适的方式实现div居中显示。

文章版权声明:除非注明,否则均为网络转载文章,转载或复制请以超链接形式并注明出处。