如何将div放在浏览器的中心

Question

我正在开发移动应用。我试图将图像对准div之外，但不能。 请帮助我，提前谢谢。 这就是我试过的

<div id="page1" data-role="page">
<div data-role="header" data-position='fixed'>
     <h1>Center table</h1>

</div>
<div data-role="content">
    <div class="centeredTable">
        <table>
            <tr>
                <td>
                    <img src="http://lorempixel.com/26/26/food/1/" ; />
                </td>
                <td><a href="#" class="ui-btn ui-corner-all custom-btn ui-shadow ui-mini">sunday</a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div> <img src="http://lorempixel.com/26/26/food/1/" ; /></div>

div.centeredTable {
margin: 0 auto;
width: 400px;
background-color: #bbb
  }
.centeredTable table {
width: 100%;
 }
 .centeredTable td {
vertical-align: middle;
text-align: center;
 }
.centeredTable tr td:first-child {
width: 20%;
 }
 .centeredTable tr td:last-child {
width: 80%;
}

我有另一张图片，我想在div之外放置，我无法做到。 如果我这样做，div将不再是中心

Answer 1

将类添加到imgs parent，例如centeredImage：

<div class="centeredImage">
   <img src="http://lorempixel.com/26/26/food/1/" ; />
</div>

然后添加CSS样式：

.centeredImage {
   text-align: center;
}

这是DEMO