CSS - 水平和垂直居中 div 不起作用(我阅读了现有的帖子，但没有任何效果......)

Question

我有一个带有内联 block 显示的 div，因此它可以很好地包装其内容。我想做的是使用我已经使用过的不同技术(我在帖子上读到的技术)将那个 div 水平和垂直居中，但没有任何效果。希望有人能帮忙。预先感谢您的答复。干杯。马克..

http://jsfiddle.net/DfDLF/

我的 html:

<div>
  <input type='text'>
  <input type='text'>
  <input type="submit">
</div> 

我的CSS:

div{
display:inline-block;
padding:5px;
background:grey;
top:50%;
margin-left:auto;
margin-right:auto;}

Answer 1

div {

    height: 100px; /* specify width */
    width: 400px; /* specify height */

    position: absolute; /* position to absolute */

    top: 50%; /* push top 50% */
    left: 50%; /* push left 50% */

    margin-top: -50px; /* set margin top to minus half height */
    margin-left: -200px; /* set margin left to minus half width */

    /* your styles.. */
    padding: 5px;
    background: grey;
} 

为此设置您的 CSS。