HTML 要素の水平方向と垂直方向のセンタリングを調べる_html/css

HTML 要素の水平方向と垂直方向のセンタリングを調べる_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:55:29

オリジナル

1343 人が閲覧しました

HTML:

<body>    <div class="maxbox">        <div class="minbox align-center"></div>    </div></body>

ログイン後にコピー

親要素

.maxbox{    position: relative;    width: 500px;    height: 500px;    margin: 5px;    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);}

ログイン後にコピー

子要素:

.minbox{    width: 200px;    height: 200px;    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);}

ログイン後にコピー

レンダリング (以下のメソッドは同じレンダリングを持ちます) ):

最初の : CSS 絶対配置
は主に絶対配置を使用し、次に自動に設定されたマージンを使用します
水平および垂直方向の中央揃え:

.align-center{    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    margin: auto;}

ログイン後にコピー

2 番目のタイプ : CSS 絶対配置
は主に絶対配置を使用し、マージンを使用して中央の位置に調整します。

水平方向と垂直方向の中央揃え:

.align-center{    position: absolute;    left: 50%;    top: 50%;    margin-left: -100px;   /*width/-2*/    margin-top: -100px;    /*height/-2*/}

ログイン後にコピー

3 番目のタイプ : CSS 絶対配置 + Javascript/JQuery
主に絶対配置を使用し、次に Javascript を使用します/JQuery 中央の位置に調整します。この方法は最初の方法に比べてクラスの柔軟性が向上します。

水平垂直中央揃え:

.align-center{    position: absolute;    left: 50%;    top: 50%;}

ログイン後にコピー

JQuery:

$(function(){    $(".align-center").css(        {            "margin-left": ($(".align-center").width()/-2),            "margin-top": ($(".align-center").height()/-2)        }    );});

ログイン後にコピー

4 番目の : CSS3 絶対位置 + 変位
Absolute を使用位置決めは、CSS3 の変換 (translate) と同じ効果を達成することもできます。

水平方向と垂直方向の中央揃え:

.align-center{    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%, -50%);       -moz-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);  /*向左向上位移*/}

ログイン後にコピー

5 番目のタイプ : フレックスボックス: [伸縮式レイアウトボックスモデル]
要素を水平方向と垂直方向にするには、 Flexbox モデルの場合言うのは簡単すぎます。

ここで HTML を変更する必要があります:

<div class="maxbox align-center">    <div class="minbox"></div></div>

ログイン後にコピー

水平方向と垂直方向の中央揃え:

.align-center{    display: flex;    display: -webkit-flex;       /*兼容问题*/    justify-content: center;    align-items: center; }

ログイン後にコピー

いくつかの方法の比較:

最初の方法 : CSS 絶対配置を使用し、マージンを自動に設定します。これは互換性が高く、最適な方法です。
2 番目のタイプ : CSS 絶対位置マージン調整を使用します。これは、互換性は優れていますが、柔軟性に欠けます。水平方向と垂直方向の中央揃えが必要なボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。
3 番目のタイプ : 互換性が高く、1 番目のタイプの欠点を補うスクリプト言語を使用します。水平方向と垂直方向のセンタリングの効果は、幅と高さの変更には影響されません。
4 番目の方法 : IE10、Chrome、Firefox、Opera と互換性のある CSS3 のいくつかの新しいプロパティを使用します。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。
5 番目のタイプ : Firefox、Opera、Chrome と互換性のある Flexbox モデルを使用すると、IE は完全に一掃されます。また、幅と高さの変化による水平方向と垂直方向のセンタリング効果には影響しません。