垂直居中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出于以下原因:

  1. 最小代码 非常有效
  2. 如上所述,集中是简单和容易的( 见另一个例子 )
  3. 等高的柱子简单而容易
  4. 用于alignment柔性元素的多个选项
  5. 它的响应
  6. 与浮动和表格不同,浮动和表格由于从未用于build筑布局而提供有限的布局容量,因此flexbox是一种具有广泛select的现代(CSS3)技术。

浏览器支持

所有主stream浏览器都支持Flexbox, IE浏览器<10 。 一些最近的浏览器版本,如Safari 8和IE10,需要供应商前缀 。 要快速添加前缀,请使用Autoprefixer 。 在这个答案的更多细节。