ホームページ > 記事 > ウェブフロントエンド > CSS の水平方向の中央揃え、垂直方向の中央揃えのテクニック_html/css_WEB-ITnose
CSS の水平方向の中央揃え、垂直方向の中央揃えのテクニック_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:581107ブラウズ
ポイント 1: コンテナの設定 [位置: 絶対;]
ポイント 2: コンテナの設定 [上: 50%;左: 50%;]
ポイント 3: コンテナの実際の幅と高さを知る (実行時に動的に取得することもできます)
ポイント 4: 水平方向のセンタリング: margin-left = -1*(width/2)、たとえば、幅が 280px の場合、[margin-left:140px;] を設定します
ポイント5: 垂直方向のセンタリング: margin-top = -1*(height/2)、たとえば、高さが110pxの場合、[margin-top:55px;]を設定します
例は次のとおりです:
html
<html><head></head><body><div id="alert"> <div class="alert-header" style="display: none;">信息提示</div> <div class="alert-message">GOOD</div> <div class="alert-footer"> <div class="btn-close">确定</div> </div></div></body></html>
css
#alert { position: absolute; width: 280px; top: 50%; left: 50%; margin-top: -55px; margin-left: -140px; border-radius: 5px; background: #fff; z-index: 1000000; padding: 20px; } ランニングエフェクト
実行時の実際のサイズ
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。