16

我试图垂直居中两个<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>

4

2 回答 2

37

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

以下是在 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;
}

演示

两个子元素 ( .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;
}

演示

用什么方法...

如果您不确定要使用哪种方法，我会推荐使用 flexbox，原因如下：

  1. 最少的代码；非常高效
  2. 如上所述，居中简单易行（参见另一个示例）
  3. 等高柱简单易行
  4. 对齐弹性元素的多个选项
  5. 它反应灵敏
  6. 与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，flexbox 是一种现代（CSS3）技术，具有广泛的选项。

浏览器支持

除了 IE < 10 之外，所有主流浏览器都支持 Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中的更多详细信息。

于 2015-08-13T00:12:14.363 回答
0

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

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

这个我没试过，如果不行请给我反馈。;)

编辑：忘了提：取消“浮动”和“位置”属性

于 2012-08-15T23:05:58.360 回答