将 div 中的两个元素垂直居中 [重复]答案

【问题标题】：Vertically center two elements within a div [duplicate]将 div 中的两个元素垂直居中 [重复]
【发布时间】：2012-08-12 06:36:26
【问题描述】：

我正在尝试将两个 <p> 元素垂直居中。

我按照phrogz.net 上的教程进行操作，但元素仍然放置在 div 上方、div 下方、在 div 内顶部对齐。

我会尝试其他方法，但这里的大多数问题都指向那个教程。

此 sn-p 用于网页顶部的横幅。

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

【问题讨论】：

标签： html css centering

【解决方案1】：

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

显示：表格单元格；和垂直对齐：中间；到bannerrightinner

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

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

【讨论】：

display:table 是因为 vertical-align:middle 仅适用于表格。不客气，很高兴你找到了答案。

【解决方案2】：

如何将元素垂直、水平或两者居中

这里有两种方法可以让 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 弹性盒方法

#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，原因如下：

最小代码；非常高效
如上所述，居中很简单 (see another example)
equal height columns are simple and easy
multiple options for aligning flex elements
反应灵敏
与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。

浏览器支持

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

【讨论】：