Html 如何垂直对齐div中的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/79461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Vertical align elements in a div?
提问by Abdu
I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other.
我有一个带有两个图像和一个h1. 所有这些都需要在 div 内垂直对齐，彼此相邻。
One of the images needs to be absolutepositioned within the div.
其中一张图像需要absolute定位在 div 中。
What is the CSS needed for this to work on all common browsers?
这需要什么 CSS 才能在所有常见浏览器上运行？
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
回答by Konrad Rudolph
Wow, this problem is popular. It's based on a misunderstanding in the vertical-alignproperty. This excellent article explains it:
哇，这个问题很流行。这是基于对vertical-align财产的误解。这篇优秀的文章解释了它：
Understanding vertical-align, or "How (Not) To Vertically Center Content"by Gavin Kistner.
理解vertical-align，或“如何（不）垂直居中内容”，作者是 Gavin Kistner。
“How to center in CSS”is a great web tool which helps to find the necessary CSS centering attributes for different situations.
“如何在 CSS 中居中”是一个很棒的网络工具，它有助于为不同情况找到必要的 CSS 居中属性。
In a nutshell (and to prevent link rot):
简而言之（并防止链接腐烂）：
- Inline elements(and onlyinline elements) can be vertically aligned in their context via
vertical-align: middle. However, the “context” isn't the whole parent container height, it's the height of the text line they're in. jsfiddle example - For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position
absoluteand specify itsheight,margin-topandtopposition. jsfiddle example - If the centered element consists of a single lineandits parent height is fixedyou can simply set the container's
line-heightto fill its height. This method is quite versatile in my experience. jsfiddle example - … there are more such special cases.
- If the inner element can have a fixed height, you can make its position
- 内联元素（并且只有内联元素）可以通过
vertical-align: middle. 但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle 示例 - 对于块元素，垂直对齐更难，很大程度上取决于具体情况：
- 如果内部元素可以有一个固定的 height，你可以设置它的位置
absolute并指定它的height,margin-top和topposition 。jsfiddle 示例 - 如果居中元素由单行组成并且其父高度是固定的，您可以简单地设置容器
line-height以填充其高度。根据我的经验，这种方法非常通用。jsfiddle 示例 - ......还有更多这样的特殊情况。
- 如果内部元素可以有一个固定的 height，你可以设置它的位置
回答by E. Serrano
Now that flexbox support is increasing, this CSS applied to the containing element would vertically center the contained item:
现在 flexbox 支持正在增加，这个应用于包含元素的 CSS 将使包含的项目垂直居中：
.container {
display: flex;
align-items: center;
}
Use the prefixed version if you also need to target Explorer 10, and old (< 4.4) Android browsers:
如果您还需要针对 Explorer 10 和旧的 (< 4.4) Android 浏览器，请使用带前缀的版本：
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
回答by user2346571
I used this very simple code:
我使用了这个非常简单的代码：
HTML:
HTML：
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
CSS：
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
Obviously, whether you use a .classor an #id, the result won't change.
显然，无论您使用 a.class还是 an #id，结果都不会改变。
回答by Romain
It worked for me:
它对我有用：
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
回答by Sameera Prasad Jayasinghe
.outer {
display: flex;
align-items: center;
justify-content: center;
}
回答by abernier
A technique from a friend of mine:
我朋友的一个技巧：
HTML:
HTML：
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
CSS：
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
DEMOhere
演示在这里
回答by Blacksonic
To position block elements to the center (works in IE9 and above), needs a wrapper div:
要将块元素定位到中心（适用于 IE9 及更高版本），需要一个包装器div：
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
回答by Shog9
All of them need to be vertically aligned within the div
所有这些都需要在 div 内垂直对齐
Aligned how? Tops of the images aligned with the top of the text?
怎么对齐？图像的顶部与文本的顶部对齐？
One of the images needs to be absolute positioned within the div.
其中一张图像需要绝对定位在 div 中。
Absolutely positioned relative to the DIV? Perhaps you could sketch out what you're looking for...?
相对于 DIV 绝对定位？也许你可以勾勒出你在寻找什么......？
fd has describedthe steps for absolute positioning, as well as adjusting the display of the H1element such that images will appear inline with it. To that, i'll add that you can align the images by use of the vertical-alignstyle:
fd 描述了绝对定位的步骤，以及调整H1元素的显示，使图像与其内联显示。为此，我要补充一点，您可以使用vertical-align样式对齐图像：
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...this would put the header and images together, with top edges aligned. Other alignment options exist; see the documentation. You might also find it beneficial to drop the DIV and move the images inside the H1element - this provides semantic value to the container, and removes the need to adjust the display of the H1:
...这会将标题和图像放在一起，顶部边缘对齐。存在其他对齐选项；请参阅文档。您可能还会发现删除 DIV 并在H1元素内移动图像是有益的——这为容器提供了语义价值，并消除了调整 显示的需要H1：
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
回答by Anita Mandal
Use this formula, and it will works always without cracks:
使用这个公式，它会一直工作而不会出现裂缝：
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>回答by Shadoweb
Almost all methods needs to specify the height, but often we don't have any heights.
So here is a CSS3 3 line trick that doesn't require to know the height.
几乎所有方法都需要指定高度，但通常我们没有任何高度。
所以这是一个不需要知道高度的 CSS3 3 行技巧。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It's supported even in IE9.
即使在 IE9 中也支持它。
with its vendor prefixes:
及其供应商前缀：
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
来源：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
