在一个div中垂直和水平对齐所有内容和元素

Question

我有一个包含两个按钮和一段文字的 div ，我想通过更改它的 CSS 来垂直和水平居中其中的所有元素和内容。如何实现？

<style>
  .middle {
    What to type in here?
  }
</style>

<div class="middle">
  <p>Hello</p>
  <br />
  <input type="button" value="Button 1">
  <br />
  <input type="button" value="Button 2">
</div>

- user2039981

---

请注意，这些<input>元素需要自闭合：<input type="button" value="Button 1" />。 - Surreal Dreams

你想如何对齐它？全部居中，靠左等等？ - reggaemahn

@Surreal Dreams - 为什么？ - user2039981

@Jeevan Jose - 是的，中间的所有内容。 - user2039981

.middle 的高度是固定的还是自适应的？ - GreyRoofPigeon

是的，它在我的实际代码中的位置被设置为“fixed”。 - user2039981

Answer 1

将您的HTML更改为以下内容：

<div class="middle">
    <div id='mydiv'>
       <p>Hello</p>
       <input type="button" value="Button 1" />
       <input type="button" value="Button 2" />
    </div>
</div>

并且你的CSS为：

.middle
{
padding: 0;
}

#mydiv
{
display: table;
margin: 0 auto;
}

#mydiv *
{
display: block;
}

input[type='button']
{
margin: 0;
}

工作的JSFiddle链接: http://jsfiddle.net/n6522/1/

PS. 边框和宽度只是为了让你有个想法。你不需要添加第一个块。

- reggaemahn

---

它没有垂直居中对齐吗？ - user2039981

不是在同一行，换行符仍应存在，但我希望所有内容都在中间垂直。 - user2039981

是的，我也接受这个答案，但我喜欢Stano提出的最简单的解决方案，请查看他回答中的jsfiddle＃3。 - user2039981

Answer 2

检查这个样式：

/* stretch them to window's height */
html, body {
    height:100%;
}

/* normalize them from default 8px to zero */
html, body, div, p {
    margin:0;
    padding:0;
}

/* vertical align */
 body {
    display:table;
    width:100%;
    overflow:auto;
}
.middle {
    display:table-cell;
    vertical-align:middle;
}

/* horizontal align */
.middle {
    text-align:center;
}

jsfiddle #1

或者，您可以将所有html代码放入某个容器

中并将其样式化，而不是使用标签进行样式设置:

jsfiddle #2

为了完整起见，最简单的样式是使

的内容居中且

的高度也取决于其内部内容，可以通过相等的上下填充来实现，如下所示：

.middle {
    padding:5em 0;
    text-align:center;
}

JSFiddle #3

- Stano

---

谢谢，第三个例子正是我在寻找的东西。 - user2039981