使用边距: 自动垂直对齐 div

小开

没有一种简单的方法可以在任何情况下都达到同样的效果。

然而，根据具体情况，有很多方法可以做到这一点。

以下是其中的一些:

设置父元素的顶部和底部填充，例如填充: 20px 0px 20px 0px
使用表格，表格单元格将其内容垂直居中
设置父元素的相对位置和要垂直居中的 div 的位置，并将其样式设置为 top: 50px; bottom: 50px; 例如

你也可以搜索“ css 垂直居中”

小开

如果知道要居中的 div 的高度 ，则可以将其绝对定位在其父级中，然后将 top值设置为 50%。这将使子元素的顶部与父元素相差50% ，也就是说太低了。通过将 margin-top设置为其高度的一半，将其拉回。现在，子 div 的垂直中点位于父 div 的垂直中点——垂直居中！

例如:

.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
background:yellow;
width:200px;
margin:auto auto;
padding:10px;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
}

<div class="black">
<div class="message">
This is a popup message.
</div>
</div>

Http://jsfiddle.net/ywnz2/2/

小开

最佳答案

2020年8月更新

虽然下面的内容仍然值得一读，但是我们已经使用 Flexbox 有一段时间了，所以就按照这个答案的规定使用它吧。

你不能用:

因为适用于块级元素的是 not

因为它们的使用值将计算为 zero

因为按百分比计算的保证金值相对于包含块的 width 计算

事实上，文档流和单元高度计算算法的特性使得不可能使用边距在元素的父元素内部垂直居中。无论何时垂直边距的值发生变化，它都会触发父元素高度重新计算(重新流) ，这反过来又会触发原始元素的重新中心... ... 使其成为一个无限循环。

你可使用:

一些像这样的变通方法适用于您的场景; 这三个元素必须像这样嵌套:

.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.helper {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative;
#top: -50%;
margin: 0 auto;
width: 200px;
border: 1px solid orange;
}

<div class="container">
<div class="helper">
<div class="content">
<p>stuff</p>
</div>
</div>
</div

根据 Browsershot，JSFiddle 可以正常工作。

小开

这是我找到的最好的解决方案: http://jsfiddle.net/yWnZ2/446/可以在 Chrome，Firefox，Safari，IE8-11和 Edge 中工作。

如果你有一个声明的 height(height: 1em，height: 50%，等等)或者是一个浏览器知道高度的元素(例如 img，svg，或者 canvas) ，那么垂直居中所需要的就是:

.message {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}

您通常需要指定一个 width或 max-width，这样内容就不会延伸整个屏幕/容器的长度。

如果您使用这个模式，您希望总是在视口中心重叠其他内容，使用 position: fixed;的两个元素，而不是 position: absolute。http://jsfiddle.net/yWnZ2/445/

以下是一篇更完整的文章: http://codepen.io/shshaw/pen/gEiDt

小开

我知道这个问题来自2012年，但我找到了有史以来最简单的方法，我想与大家分享。

HTML:

<div id="parent">
<div id="child">Content here</div>
</div>

和 CSS:

#parent{
height: 100%;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}

小开

自从这个问题在2012年被问及，并且我们已经在浏览器支持 Flexbox 方面取得了长足的进步，我觉得这个答案似乎是必须的。

如果父容器的显示是 flex，那么是的、 margin: auto auto(也称为 margin: auto)将使其在水平和垂直方向居中，不管它是 inline还是 block元素。

#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
}
#child {
margin: auto auto;
}

<div id="parent">
<div id="child">hello world</div>
</div>

请注意，宽度/高度不必绝对指定，如在此 Rel = “ noReferrer”> example jfiddle 中使用相对于视口的大小。

尽管在发布时，浏览器对 Flexbox 的支持达到了历史最高水平，但是许多浏览器仍然不支持它或者需要厂商的前缀。有关最新的浏览器支持信息，请参阅 http://caniuse.com/flexbox。

更新

由于这个答案引起了一些注意，我还想指出，如果您使用的是 display: flex，那么根本不需要指定 margin，而是需要将容器中的所有元素都集中起来:

#parent {
width: 50vw;
height: 50vh;
background-color: gray;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}

<div id="parent">
<div>hello world</div>
</div>

小开

编辑: 现在是2020年，我会用 Flex box 代替。

原答案:

Html

<body>
<div class="centered">
</div>
</body>

CSS

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

小开

这两个解决方案只需要两个嵌套元素。
首先 -相对和绝对定位 如果内容是静态的(手动中心)。

.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);


}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%;  left: 0%; right: 0%;
}

Https://jsfiddle.net/glupijas/5mv3j171/

或 用于流体设计-为确切的内容中心使用下面的例子代替:

.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Https://jsfiddle.net/glupijas/w3jnjuv0/

您需要“最小高度”设置的情况下，内容将超过50% 的窗口高度。您还可以使用移动和平板设备的媒体查询来操作这个高度。但前提是你必须使用响应式设计。

我想您可以更进一步，使用简单的 JavaScript/JQuery 脚本来操作 min-height 或固定高度(如果出于某种原因需要的话)。

Second -如果内容是流动的 u 还可以使用具有垂直对齐和以文本对齐为中心的 table 和 table-cell css 属性:

/*in a wrapper*/
display:table;

还有

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

工程和规模完美，经常用作响应式网页设计的解决方案与网格布局和媒体查询，操纵对象的宽度。

.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);


}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}

Https://jsfiddle.net/glupijas/4daf2v36/

我更喜欢表格解决方案的确切内容中心，但在某些情况下，相对绝对定位将做得更好，尤其是如果我们不想保持确切的内容对齐比例。

小开

使用 Flexbox:

HTML:

<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
height: 500px;
display: flex;
justify-content: center; /* horizontal center */
align-items: center;     /* vertical center */
}

查看结果

小开

可变高度，边距顶部和底部自动

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
This is a popup message.
</div>

可变高度，边距顶部和底部自动

小开

.black {
display:flex;
flex-direction: column;
height: 200px;
background:grey
}
.message {
background:yellow;
width:200px;
padding:10px;
margin: auto auto;
}

<div class="black">
<div class="message">
This is a popup message.
</div>
</div>

小开

.black {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.5);
}
.message {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
background:yellow;
width:200px;
padding:10px;
}


-




----------




<div class="black">
<div class="message">
This is a popup message.
</div>

小开

我觉得你可以用 Flexbox 解决这个问题

.black {
height : 200px;
width : 200px;
background-color : teal;
border: 5px solid rgb(0, 53, 53);
/* This is the important part */
display : flex;
justify-content: center;
align-items: center;
}


.message {
background-color :  rgb(119, 128, 0);
border: 5px solid rgb(0, 53, 53);
height : 50%;
width : 50%;
padding : 5px;
}

<div class="black">
<div class="message">
This is a popup message.
</div>
</div>

小开

.black {
position:absolute;
/*
Replace with a one line inset property.
top:0;
bottom:0;
left:0;
right:0;
*/
inset: 0;
background:rgba(0,0,0,.5);
/*
Since no one has mentioned it yet,
here it is the grid display and
the place-content property.
*/
display:grid;
place-content: center;
}
.message {
background:yellow;
width:200px;
/*
There's no point here.
margin:auto auto;
*/
padding:10px;
}

<div class="black">
<div class="message">
This is a popup message.
</div>
</div>

小开

<div style="display:flex">
<img src="" style="display:block !important; margin:auto">
</div>

在 div 中使图像水平和垂直居中