「Web 開発でボックスを中央に配置するためのいくつかの方法」_html/css

「Web 開発でボックスを中央に配置するためのいくつかの方法」_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:15:24

オリジナル

1151 人が閲覧しました

1. ボックスの中央揃えのいくつかの方法を記録します: 1.0、マージンの幅と高さを中央に固定、

3.0、絶対位置を中央に配置します。 ;

5.0、中央にフレックス;

7.0、中央に不確定な幅と高さ (絶対位置のパーセンテージ);

8.0、中央に配置。

2 番目、コードのデモ (html は同じデモを使用します):

html デモ:

<body>    <div id="container">        <div id="box"></div>    </div></body>

ログイン後にコピー

1.0、マージンは幅と高さを中央に固定 (デモ)

この位置決め方法純粋に幅、高さ、マージンに基づいており、あまり柔軟性がありません。

CSS:

#container {    width: 600px;    height: 500px;    border: 1px solid #000;    margin: auto;}#box {    width: 200px;    height: 200px;    margin: 150px 200px;    background-color: #0ff;}

ログイン後にコピー

2.0、負のマージンのセンタリング (デモ)

センタリングには負のマージンを使用します。固定の幅と高さを知る必要があり、制限は比較的大きいです。

CSS:

#container {    position: relative;    width: 600px;    height: 500px;    border: 1px solid #000;    margin: auto;}#box {    position: absolute;    width: 200px;    height: 200px;    left: 50%;    top: 50%;    margin: -100px -100px;    background-color: #0ff;}

ログイン後にコピー

3.0、絶対配置とセンタリング (デモ)

非常に一般的な方法である絶対配置とセンタリングを使用します。

CSS:

すごいです

4.0、テーブルセルのセンタリング (デモ)

テーブルセルを使用して垂直方向のセンタリングを制御します。

CSS:

すごいです

5.0、フレックスセンタリング (デモ)

CSS3 で導入された新しいレイアウト方法が使いやすくなりました。欠点: IE9 と IE9 には互換性がありません。

CSS:

#container {    position: relative;    width: 600px;    height: 500px;    border: 1px solid #000;    margin: auto;}#box {    position: absolute;    width: 200px;    height: 200px;    left: 0;    top: 0;    right: 0;    bottom: 0;    margin: auto;    background-color: #0ff;}

ログイン後にコピー

6.0、transformcentered (demo)

このメソッドは、CSS のtransform属性を柔軟に使用しますが、これは比較的斬新です。欠点は、IE9 では互換性がないことです。

CSS:

#container {    display: table-cell;    width: 600px;    height: 500px;    vertical-align: middle;    border: 1px solid #000;}#box {    width: 200px;    height: 200px;    margin: 0 auto;    background-color: #0ff;}

ログイン後にコピー

7.0、不確実な幅と高さのセンタリング (絶対位置決めパーセンテージ) (デモ)

この種の不確実な幅と高さのセンタリングはより柔軟です。水平方向のセンタリングを実現するには左右のパーセンテージが同じであることを確認し、垂直方向のセンタリングを実現するには上部と下部のパーセンテージが同じであることを確認してください。

CSS:

#container {    display: -webkit-flex;    display: flex;    -webkit-align-items: center;            align-items: center;    -webkit-justify-content: center;            justify-content: center;    width: 600px;    height: 500px;    border: 1px solid #000;    margin: auto;}#box {    width: 200px;    height: 200px;    background-color: #0ff;}

ログイン後にコピー

8.0、ボタンの中央揃え (デモ)

ボタンを外側のコンテナとして使用すると、内部のブロック要素が自動的に垂直方向の中央に配置されます。これを実現するには、水平方向の中央揃えを制御するだけです。の効果。 ...