【cssコピペ】画像を縦中央にセンタリングする方法・中央寄せできないとき【flexbox】

flexboxを使って真ん中に配置

lexboxを使うと、ど真ん中に配置するのは簡単。親要素にdisplay: flexに加えて、justify-content: center、align-items: centerを指定するだけです。

flexboxのコードサンプル

HTML

<div class="parent">
<div class="example">
例文
</div>
</div>

CSS

.parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: orange;
}
.example {
display: block;
width: 100px;
background: #FFF;
}

中央寄せができないときの対処方法

  • text-align:centerが効かない
  • margin: 0 autoが効かない
  • vertical-alignが効かない
  • position: absoluteができない

こんなときに、ぜひ試してみてほしい対処方法です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です