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

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

工作 fiddle :http://jsfiddle.net/n6522/1/

附言。边框和宽度只是给你一个想法。您不需要添加第一个 block 。