垂直居中div内的两个元素
我正在尝试垂直居中两个<p>元素。
我在phrogz.net上跟着教程，但是仍然把元素放在div之下，在div之下，顶部alignment。
我会尝试一些其他的东西，但这里的大部分问题都只是指向那个教程。
这个片段是针对网页顶部的横幅。
.banner { width: 980px; height: 69px; background-image: url(..http://img.dovov.comnav-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>
添加以下内容：display：table; 为了旗帜
显示：表细胞; 和vertical-align：middle; 去捧红
我还没有尝试过，请给我反馈，如果它不工作。 ;）
编辑：忘了提及：closures“浮动”和“位置”属性
如何垂直，水平或两者居中元素
这里有两种方法将div分隔在div中。
一种方式使用CSS Flexbox ，另一种方式使用CSS 表格和定位属性。
在这两种情况下，居中div的高度可以是可变的，不确定的，未知的，无论如何。 居中div的高度并不重要。
以下是两者的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方法
#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; }
DEMO
两个子元素（ .box ）与flex-direction: column垂直alignment。 对于水平alignment，将flex-direction切换为row （或者简单地将该规则移除为flex-direction: row是默认设置）。 项目将保持居中垂直和水平（ DEMO ）。
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; }
DEMO
使用哪种方法…
如果您不确定使用哪种方法，我会推荐flexbox出于以下原因：
- 最小代码 非常有效
- 如上所述，集中是简单和容易的（ 见另一个例子 ）
- 等高的柱子简单而容易
- 用于alignment柔性元素的多个选项
- 它的响应
- 与浮动和表格不同，浮动和表格由于从未用于build筑布局而提供有限的布局容量，因此flexbox是一种具有广泛select的现代（CSS3）技术。
浏览器支持
所有主stream浏览器都支持Flexbox， IE浏览器<10 。 一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀 。 要快速添加前缀，请使用Autoprefixer 。 在这个答案的更多细节。
