Html 将 div 中的两个元素垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11978231/
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
Vertically center two elements within a div
提问by Romuloux
I am trying to vertically center two <p>elements.
我试图垂直居中两个<p>元素。
I followed the tutorial at phrogz.netbut still the elements get placed above the div, below the div, top-aligned within the div.
我遵循了phrogz.net 上的教程，但仍然将元素放置在 div 上方，div 下方，在 div 内顶部对齐。
I would try something else but most of the questions here just point back to that tutorial.
我会尝试其他的东西，但这里的大多数问题只是指向那个教程。
This snippet is for a banner that is on the top of a web page.
此代码段用于位于网页顶部的横幅。
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>采纳答案by Fábio
Add the following: display:table; to bannerRight
添加以下内容： display:table; 到横幅右
display:table-cell; and vertical-align:middle; to bannerrightinner
显示：表格单元格；和垂直对齐：中间；给bannerrightinner
I have not tried this, please give me feedback if it does not work. ;)
这个我没试过，如果不行请给我反馈。;)
EDIT: forgot to mention: take 'float' and 'position' properties off
编辑：忘记提及：取消“浮动”和“位置”属性
回答by Michael Benjamin
How to Center Elements Vertically, Horizontally or Both
如何垂直、水平或同时居中元素
Here are two ways to center divs within divs.
这里有两种在 div 中居中 div 的方法。
One way uses CSS Flexboxand the other way uses CSS table and positioningproperties.
一种方式使用 CSS Flexbox，另一种方式使用 CSS表和定位属性。
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
在这两种情况下，居中 div 的高度可以是可变的、未定义的、未知的等等。居中 div 的高度无关紧要。
Here's the HTML for both:
这是两者的 HTML：
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
CSS Flexbox Method
CSS 弹性盒方法
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
The two child elements (.box) are aligned vertically with flex-direction: column. For horizontal alignment, switch the flex-directionto row(or simply remove the rule as flex-direction: rowis the default setting). The items will remain centered vertically and horizontally (DEMO).
两个子元素 ( .box) 与 垂直对齐flex-direction: column。对于水平对齐，切换flex-direction到row（或简单地删除规则作为flex-direction: row默认设置）。项目将保持垂直和水平居中（DEMO）。
CSS Table and Positioning Method
CSS 表格和定位方法
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;
}
Which method to use...
使用哪种方法...
If you're not sure which method to use, I would recommend flexbox for these reasons:
如果您不确定使用哪种方法，我会推荐 flexbox，原因如下：
- minimal code; very efficient
- as noted above, centering is simple and easy (see another example)
- equal height columns are simple and easy
- multiple options for aligning flex elements
- it's responsive
- unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
- 最少的代码；非常有效率
- 如上所述，居中很简单（见另一个例子）
- 等高列简单易行
- 用于对齐 flex 元素的多个选项
- 它是响应式的
- 与浮动和表格不同，它们提供有限的布局容量，因为它们从来没有用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。
Browser support
浏览器支持
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
所有主流浏览器都支持 Flexbox，但 IE < 10 除外。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。
