cssで上下左右中央表示させる

cssで要素を上下左右中央寄せにする方法

cssで上下左右中央に要素を設置する方法です。画像のサイズや文字列が2行以上になっても柔軟に対応するので大変使い勝手よいです。
投稿日: 2014/08/17
最終更新日: 2015/12/29
 

上下左右中央にするCSS

CSSで上下左右中央寄せにする

あるボックスの中で上下左右の中央に画像を寄せるための方法をご紹介します。
テキストが2行以上になったとしても、上下左右ともに中央表示出来ます。

画像のサイズや文字列が変わっても対応する

ある高さ、幅に合わせて要素が中央になるようにしたい。
画像の大きさが変わっても、文字列が増えても対応するような柔軟さが欲しい。

htmlソース

<div class="updowncenter_wrapper">
    <div class="updowncenter_contents1">
        <span class="updowncenter_contents2">
        <div class="textbox">
        ここに文字とか画像入れたら<br />
        中央表示になるばい!
        </div>
        <img src="画像URL" />
        </span>
    </div>
</div>

CSSソース

.updowncenter_wrapper {
    width: 100%;
	height:400px;
    padding:15px;
    display: table;
    margin:0 auto;
    background-color:#FFF3E8;
}

.updowncenter_contents1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    /position: relative;
    /top: 50%;
}

.updowncenter_contents2 {
    /position: relative;
    /top: -50%;
}

.textbox{
    width:250px;
    margin:0 auto; 
    text-align:left;
}

このソースで上下左右が中央寄せになるボックスが作れます。
htmlソースのspan部分に注意して下さい。

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事