对齐容器div

Question

我的页面上有这个。我希望容器div在中心对齐。所以我给了显示：内联块。但它不起作用。为什么会这样？有没有办法将容器显示为内联块元素，以便它们恰好出现在中心？

<div id="container">
        <div id="definition">
            <p>Nothing</p>
        </div>
        <div id="image">
            <img src="img1.jpg" />
        </div>
    </div>
<div id="container">
        <div id="definition">
            <p>Nothing</p>
        </div>
        <div id="image">
            <img src="img1.jpg" />
        </div>
    </div>
<div id="container">
        <div id="definition">
            <p>Nothing</p>
        </div>
        <div id="image">
            <img src="img1.jpg" />
        </div>
    </div>

CSS

#container {
   vertical-align:top;
}
#image {
    height:30%;
    width:30%;
    position: absolute;
    overflow: hidden;
}

#definition {
    width: 30%;
    height: 30%;
    position: absolute;
    background-color: red;
}

Answer 1

使用display: table和display: table-cell此代码会将d​​iv放在页面中心：Fiddle。希望这是你想要的效果。