div を水平方向および垂直方向に中央揃えにする方法_html/css

div を水平方向および垂直方向に中央揃えにする方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:31

オリジナル

1142 人が閲覧しました

div を水平方向および垂直方向に中央揃えにする方法

@(css)[Miaotong]

はじめに

div のコンテンツを水平方向および垂直方向に中央揃えにする必要があることがよくあります。そこで、divを水平方向と垂直方向に中央揃えにする方法を紹介します。

コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div水平垂直居中</title>    <style>        *{            margin:0;            padding:0;        }        div.box{            background-color:pink;            border:2px solid #000;            width:960px;            height:500px;            margin-left:50px;        }    </style></head><body>    <div class="box">            <img src="girl.jpg" alt="美女">    </div>   </body></html>

ログイン後にコピー

レンダリング:

次に、画像を div の水平方向の中央に配置します。まず、画像上にボックスのレイヤーを配置します。
コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div水平垂直居中</title>    <style type="text/css">        *{            margin:0;            padding:0;        }        div.container{            background-color:pink;            border:2px solid #000;            width:500px;            height:500px;            margin:50px auto;            display:table;            }        div.wrapper{            text-align:center;            display:table-cell;            vertical-align:middle;        }        div.wrapper img{            border:1px solid #ddd;        }      </style></head><body>    <div class="container">            <div class="wrapper">                <img src="girl.jpg" alt="美女"/>                            </div>    </div>  </body></html>

ログイン後にコピー

IE8/Firefox/Chrome/Safari/Opera ページの効果:

IE6/IE7 ページの効果:

IE6/IE7 との互換性が必要であることがわかります:

コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div水平垂直居中</title>    <style type="text/css">        *{            margin:0;            padding:0;        }        div.container{            background-color:pink;            border:2px solid #000;            width:500px;            height:500px;            margin:0 auto;            display:table;            margin-top:20px;                    }        div.wrapper{            text-align:center;            display:table-cell;            vertical-align:middle;        }        div.wrapper img{            border:1px solid #ddd;        }     </style>    <!--[if lte IE 7]>        <style type="text/css">            div.container{                position:relative;            }            div.wrapper{                position:absolute;                left:50%;top:50%;            }            div.wrapper img{                position:relative;                left:-50%;top:-50%;            }        </style>	<![endif]--></head><body>    <div class="container">            <div class="wrapper">                <img src="girl.jpg" alt="美女"/>                            </div>    </div>  </body></html>

ログイン後にコピー

IE6/IE7 レンダリング:

要約すると、div 内のコンテンツを水平方向に中央揃えするには、 text-align:center; を使用できます。

垂直方向の中央揃えを実現するには、コンテナーの display:table とラッパーのディスプレイを使用します。 table -cell; とvertical-align:middle; は、div 内の画像の水平方向と垂直方向の中央揃えを実現できます。

複数の画像がある場合、中央揃えを実現するには:

コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div水平垂直居中</title>    <style>        *{            margin:0;            padding:0;        }        div.container{            background-color:pink;            border:2px solid #000;            width:700px;            height:500px;            margin:0 auto;            margin-top:50px;        }        div.wrapper{            text-align:center;            margin-top:28px;        }        div.wrapper img{            border:1px solid #ddd;            width:200px;            margin:10px;        }      </style></head><body>    <div class="container">            <div class="wrapper">                <img src="girl3.jpg" alt="美女"/>                  <img src="girl3.jpg" alt="美女"/>                <img src="girl3.jpg" alt="美女"/>                <img src="girl3.jpg" alt="美女"/>                <img src="girl3.jpg" alt="美女"/>                <img src="girl3.jpg" alt="美女"/>            </div>    </div>   </body></html>

ログイン後にコピー

IE6/IE7/IE8/Firefox/Chrome/Safari/Opera ページの効果:

text-align:center in div.wrapper;水平方向のセンタリングを実現し、垂直方向のセンタリングを実現するには margin-top:28px。

28px=[500-(200+1+1+10+10)*2]/2、つまり、外側のレイヤーの高さから内側のレイヤーの高さを引いたものを2で割って、margin-topを設定します。そしてそれが中心になります。

間違いや提案がある場合は、修正してください。-----Miaotong。