ホームページ > 記事 > ウェブフロントエンド > HTML は要素を水平方向と垂直方向に中央揃えにします
HTML は要素を水平方向と垂直方向に中央揃えにします
- 高洛峰オリジナル
- 2017-02-27 10:43:42997ブラウズ
ページをデザインするとき、ログイン ウィンドウを中央に配置するなど、p を中央に配置し、ページ ウィンドウに対して水平方向および垂直方向に表示する必要があることがよくあります。
これまでに、多くの方法が検討されてきました。
HTML:
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body>Renderings (以下のメソッドは同じレンダリングになります):
最初のタイプ: CSS 絶対配置
主に絶対配置を使用し、マージンを使用して中間位置に調整します。
親要素:
.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);
}
水平垂直中央揃え:
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}
2番目のタイプ: CSS絶対配置 + Javascript/JQuery
主に絶対配置を使用し、その後に使用しますJavascript /JQuery は中間位置に調整されます。この方法は最初の方法に比べてクラスの柔軟性が向上します。
親要素:
.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);
}
水平垂直中央揃え:
.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)
}
);
});3番目のタイプ: CSS3絶対配置+ディスプレイスメント
絶対を使用CSS3での位置決め変換: 変換でも同じ効果を得ることができます。
親要素:
.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);
}水平方向と垂直方向の中心揃え:
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
}4番目の方法: フレックスボックス: [伸縮レイアウトボックスモデル]
Flexbox モデル 言うのは簡単すぎます。
ここで HTML を変更する必要があります:
<p class="maxbox align-center">
<p class="minbox"></p>
</p>親要素:
.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);
}
水平方向と垂直方向の中央揃え:
.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}
いくつかの方法の比較:
最初の CSS 絶対位置マージン調整は互換性は良好ですが、柔軟性に欠けます。水平方向と垂直方向の中央揃えが必要なボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。 2 つ目はスクリプト言語を使用しており、互換性が高く、1 つ目の欠点を補っています。水平方向と垂直方向のセンタリングの効果は、幅と高さの変更には影響されません。
3 番目のものは CSS3 のいくつかの新しいプロパティを使用しており、IE10、Chrome、Firefox、Opera と互換性があります。互換性はあまり良くなく、横方向と縦方向のセンタリング効果は幅と高さを変更しても影響を受けません。
Firefox、Opera、Chromeと互換性のあるFlexboxモデルを使用すると、IEは完全に一掃されます。また、幅と高さの変化による水平方向と垂直方向のセンタリング効果には影響しません。