在div中垂直居中两个元素

Question

我试图垂直居中两个<p>元素.

我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.

我会尝试其他的东西,但这里的大多数问题只是回到那个教程.

此代码段用于网页顶部的横幅广告.

.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>

Answer 1

如何垂直,水平或两者中心元素

这里有两种方法可以将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.对于水平对齐,切换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. 用于对齐flex元素的多个选项
5. 它的反应灵敏
6. 与浮动和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,flexbox是一种现代(CSS3)技术,具有广泛的选项.

浏览器支持

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

Answer 2

添加以下内容：显示：表格；到横幅右

显示：表格单元格；和垂直对齐：中间；到横幅右内

我没有尝试过这个，如果不起作用请给我反馈。;)

编辑：忘记提及：关闭“浮动”和“位置”属性