Question

我有一个包含一些内容的div，在这种情况下是2个按钮和一个段落。我想通过改变它的CSS来垂直和水平地对齐div中的所有元素和内容。我怎么能这样做？

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

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;
}

工作小提琴：http://jsfiddle.net/n6522/1/

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

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代码放入某个容器div并对其进行样式化，而不是body标记：

jsfiddle #2

为了完整起见，.middle分区的内容居中且.middle的高度也取决于其内部内容的最简单样式可以使用相等的顶部和底部填充来制作如下：

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

jsfiddle #3

垂直和水平对齐div内的所有内容和元素

2 个答案: