html - 对齐容器 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此代码将使页面上的 div 居中：Fiddle。希望这是你想要的效果。