如何在没有绝对定位的情况下将主体元素内的 div 垂直和水平居中？ [复制]
Posted
技术标签:
【中文标题】如何在没有绝对定位的情况下将主体元素内的 div 垂直和水平居中？ [复制]【英文标题】：How do I center vertically and horizontally a div inside the body element without absolute positioning? [duplicate] 【发布时间】：2013-02-25 16:20:55 【问题描述】：我已经阅读了无数关于垂直对齐和居中 div 的问答和博客文章，但我无法找到最简单的情况：直接在 html 正文中放置一个空的 20x20 div。
html:
body
background-color:DarkGray;
display:table;
.box
background-color:black;
display:table-cell
margin:0, auto;
width:20px;
height:20px;
<body>
<div class="box">
</div>
</body>
这里是JSFiddle。
【问题讨论】：
***.com/questions/4325643/… 有人可以为 2020 年添加更好的方式吗？ 【参考方案1】：display:table 和 display:table-cell 不好，远离它们。这是在<body> 中居中div 的一种非常常见的方法。它将元素的顶部和左侧定位在 body 内的 50% 点处，然后从 margin-top 和 margin-left 中减去 width 和 height 的 1/2。
.box
background-color: black;
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
/* -1/2 width */
margin-top: -10px;
/* -1/2 height */
<body>
<div class="box">
</div>
</body>【讨论】：
因为没有它们你可以做任何事情，所以它们被设计为仅用于表格单元格。他们可以做的一件事我认为没有他们你就无法做到，那就是垂直居中多行文本。【参考方案2】：首先，边距样式存在语法错误：
margin: 0, auto;
但应该是：
margin: 0 auto;
支持垂直定位应该是：
html,
body
background-color: DarkGray;
height: 100%;
.box
position: relative;
top: 50%;
margin: -10px auto;
/* -height/2 */
width: 20px;
height: 20px;
background-color: black;
<body>
<div class="box">
</div>
</body>并且本站有讨论Why not use tables for layout in HTML?
【讨论】：
【参考方案3】：Tyriar 的代码绝对是最好的解决方案。
永远记得将margin-left 和margin-top 设置为要居中的div 宽度的一半，因为元素总是从它们的侧面而不是它们的中心对齐。
【讨论】：
以上是关于如何在没有绝对定位的情况下将主体元素内的 div 垂直和水平居中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout
两个DIV，父元素相对定位没有设置高度，子元素绝对定位高度随内容变化，此无法撑开父DIV