ホームページ > 記事 > ウェブフロントエンド > 垂直方向のセンタリングを実現する 3 行の CSS コード_html/css_WEB-ITnose
垂直方向のセンタリングを実現する 3 行の CSS コード_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:08:451141ブラウズ
HTML 構造は次のとおりです:
<div id='div2'> <div id='div1'></div></div>
CSS コードは次のとおりです:
#div2{ height:300px;width:300px; border:1px red solid; text-align:center; margin:auto;}#div1{ height:50px;width:50px; position: relative; top: 50%; transform: translateY(-50%); border:1px red solid; margin:auto;} 最もコアな CSS はこれらの 3 行です
position: relative; top: 50%; transform: translateY(-50%);
ブラウザーの互換性を確保するには、transform 属性の前にブラウザーの接頭辞を追加する必要があります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。