【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ができない

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

コメントを残す

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

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は驚異の4万冊。