Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8773

absolute × transform で上下中央寄せ(コピペ用)

$
0
0

absolute × transform

コピペして使う用の記事です。
flexやmargin:auto;などで中央寄せも出来ますが、この手法は擬似要素などを中央寄せする際にとても便利です。

.wrapper{width:100%;position:relative;}.inner{position:absolute;top:50%;left:50%;transform:translateY(-50%)translateX(-50%);/* transformがセンタリングしたい要素の縦、横幅分を引いてくれるので中央になる */}

wrapperの上下中央にinnerが配置されます。


Viewing all articles
Browse latest Browse all 8773

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>