サイズ不明な要素を中央寄せにする方法

width, heightのサイズが不明な要素を中央に配置したい時のTipsです。

共通html

<div class="wrapper">
<div class="inner">
なす：¥280<br>
ピーマン：￥140<br>
たまねぎ：￥160
</div>
</div>

widthが不明な要素を左右中央に配置したい場合

css

.wrapper {
text-align: center;
}
.inner {
display: inline-block;
}

サイズ不明な要素を上下左右中央に配置したい場合

flexboxを使ってしまえば簡単なのですが、ここではあえて違う方法で。

css

.wrapper {
  display: table;
  width: 100%;
}
.inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ちょっとコード記述は増えますが、以下のような方法もあります。
table化を避けたい方向け。

css

.wrapper{
 text-align: center;
}
.wrapper:before {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.25em; 
}
.inner {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
}