在div中垂直居中的两个元素

Question

在div中垂直居中的两个元素我正试着把两个垂直的中心<p>元素。我在phronz.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

添加以下内容：Display：table；to bannerright

显示：表格单元格；垂直对齐：中间；到边框右边。

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

编辑：忘记提到：去掉“浮动”和“位置”属性

Answer 2

如何对元素进行垂直、水平或两者的居中

这里有两种在div中对div进行中心化的方法。

一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产。

在这两种情况下，居中的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;}

演示

两个子元素(.box)垂直对齐flex-direction: column..对于水平对齐，请将flex-direction到row(或者简单地删除如下规则：flex-direction: row是默认设置)。项目将保持垂直和水平中心(演示).

---

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. 对齐FLEX元素的多个选项

5. 是有反应的
6. 与浮标和表格不同，它们提供有限的布局容量，因为它们从来就不是用来构建布局的，柔性盒是一种具有广泛选择的现代(CSS 3)技术。

---

浏览器支持

所有主流浏览器都支持Flexbox，除IE<10..最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀..有关添加前缀的快速方法，请使用自动复位器..更多细节见这个答案.