css样式设置div居中
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居中显示。