ある要素を上下左右で中央寄せ #CSS

cssで上下左右について中央寄せする方法をメモしときます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/app.css" media="all"></head>
<body>
  <div id="wrapper">
    <div id="content">
      <div>aaaaaaaaaaaaaaaaaa</div>
      <div>bbbbbbbbbbbbbbbbbb</div>
      <div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQua0NllMioghppch0ZR7ksnoPAQ9R05DTE7_jDCSJdRHFCYeVbVQ"></div>
      <div>cccccccccccccccccc</div>
    </div>
  </div>
</body>
</html>

app.css

#wrapper{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  width: 700px;
  height: 500px;
  border: medium solid #ff00ff;
}

#content{
  display: inline;
}

#wrapperに対して#contentを中央寄せする場合は、
#wrapperに
display: table-cell; vertical-align: middle; text-align:center;
を指定し、
#contentに
display: inline;
を指定すればうまく行った。

display: inline;
だとwidthとかが変更できなくなるので、display: inline-block; の方が汎用性があるかもしれない。