スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

cssでblock要素を上下左右で中央揃えにする方法

cssでblock要素を上下左右で中央揃えにする方法のメモ。
position: absolute;
top: 50%;
left: 50%;
で、中央揃えにしたい要素のwidth, heightの半分をネガティブマージンしたりで出来るが、中央揃えにしたい要素のサイズが固定じゃないとうまくいかない。
display: table-cell も、あまり使いたくないので、探していたら見つけた。

中央揃えしたい要素に下記を設定
■HTML
<div class="parent">
<div class="child">
中央揃えしたい
</div>
</div>

■CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


参考サイト
CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。