如何将 DIV 盒子居中在屏幕中心,方法 1:使用 CSS 属性,text-align: center; 将容器元素居中。,margin: auto; 在容器元素上设置自动边距,它将元素居中在容器内。,HTML 代码:,方法 2:使用 flexbox,display: flex; 将容器元素转换为 flexbox。,justify-content: center; 将元素在主轴(水平方向)上居中。,align-items: center; 将元素在交叉轴(垂直方向)上居中。,HTML 代码:,方法 3:使用绝对定位,position: absolute; 将元素从正常文档流中移除。,left: 50%; 将元素从左边移动其宽度的一半。,transform: translate(-50%, -50%); 将元素从中心点向左和向上移动其宽度和高度的一半。,HTML 代码:,附加说明:,某些情况下,您可能需要调整边距或其他样式值以确保正确居中。
确保容器元素足够大,可以容纳您的内容。
这些方法适用于所有现代浏览器。,