ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の水平方向の中央揃え、垂直方向の中央揃えのテクニック_html/css_WEB-ITnose

CSS の水平方向の中央揃え、垂直方向の中央揃えのテクニック_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:46:581132ブラウズ

ポイント 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 までご連絡ください。