在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. 如上所述，居中简单易行（see another example）
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. 响应
6. 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

浏览器支持

所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

添加以下内容： 显示：表;到bannerRight

显示：表细胞;和 垂直对齐：中部;来自bannerrightinner

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

编辑：忘了提及：关闭'浮动'和'位置'属性