ホームページ > 記事 > ウェブフロントエンド > CSSで縦横中央配置を実現する方法をお話します
CSSで縦横中央配置を実現する方法をお話します
- 青灯夜游オリジナル
- 2020-08-03 16:59:582000ブラウズ
最近の面接で、面接官から CSS の水平方向と垂直方向のセンタリングのレイアウト方法について質問されました。フロントエンド初心者の私は間違いなく混乱しました。すぐに情報を調べました。落とし穴にはまらないように、それを分析して皆さんと共有しましょう。
まず、HTML といくつかの基本的な CSS スタイルについて説明します。以下では詳細は説明しません。
html
<body> <div class="div1"> <div class="box size">垂直水平居中</div> </div> </body>
パブリック CSS コードは次のとおりです
<style type="text/css">
/* 公共样式 */
.div1{
width: 300px;
height: 300px;
border:1px solid aqua;
}
.box{
background: #00FFFF;
}
.box.size{
width:100px;
height:100px;
}
</style>これらの CSS スタイルは、以降の紹介文にデフォルトで含まれます。なので詳細は説明しません！
1. 絶対値とマージン自動 (一般的に使用されます)
同様に、中央に配置された要素の幅と高さは固定する必要があり、子要素の幅と高さを知る必要があります
このように、全方向の距離を 0 に設定し、マージンを auto に設定すると、全方向の中央に配置できます
.div1{
position: relative;
}
.box{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}2. 絶対位置とマージン (負の値)
原理を簡単に説明します。絶対位置決めが使用されます。絶対位置決めのパーセンテージは、幅と幅に対する相対値です。親要素の高さなので、この原則に基づいて要素を中央に配置できます。ただし、絶対配置は子要素の左上隅に基づいていることに注意してください。ただし、子要素を中央に表示したい場合は、この問題を解決する必要があります。
このとき、効果を実現するためにマージンの負の値を使用できます。マージンが負の場合、要素は反対方向に配置されます。このようにして、サブ要素のマージンを次のように設定できます。サブ要素の幅と高さの半分。 (追記: 欠点は、子要素の幅と高さを取得する必要があることです)
.div1{
position: relative;
}
.box{
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
}3. Absolute と calc
も子要素の幅と高さが必要です。固定されており、幅と高さがわかっているため、css3 には計算されたプロパティがあります。
上部のパーセンテージは、要素の左上隅から幅の半分を引いた値に基づいています (追記: 計算の互換性によって異なります)
.div1{
position: relative;
}
.box{
position: absolute;
top: calc(50% - 50px );
/* 减号前后没有空格，该样式不生效*/
left: calc(50% - 50px );
}このコードを書いているときに、興味深いものを発見しました。 thing, calc (50%-50px) マイナス記号の前後にスペースがないとスタイルが反映されません スペースを入れると通常通り反映されます 具体的な理由は分かりません emmmmm
以下のメソッドは、子要素の幅と高さを知らなくても設定できます。
html は次のように変更されます:
<body> <div class="div1"> <div class="box">水平垂直居中，不需要子元素固定宽高</div> </div> </body>
The public css は次のとおりです
.div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
background: #00FFFF;
}4. Flex (一般的に使用されます)
flex は、いくつかの要素のみを必要とする最新のレイアウト ソリューションです。センタリング効果を実現するためのコード行
.div1{
display: flex;
justify-content: center;
align-items: center;
} 5. line-height
インライン要素のセンタリング属性を使用すると、水平方向と水平方向を実現することもできます。垂直方向のセンタリング。ボックスをインライン要素として設定し、text-align を使用して水平方向の中央揃えまたは垂直方向の位置合わせを実現します (追記: この方法では、子要素でテキスト表示を目的の効果にリセットする必要があります)
.div1{
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box{
font-size: 10px;
display: inline-block;
vertical-align: middle;
line-height:initial;
/* 修正文字 */
text-align: left;
}#6. Absolute と transform
は子要素の幅と高さを固定する必要はありませんが、translate2d .div1{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
の互換性に依存します。 7. css-table
CSS の新しい table 属性は、通常の要素の表示効果を table 要素に変更でき、水平方向の中央揃えも実現できます .div1{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display:inline-block;
}上記中央寄せレイアウトの方法をいくつかまとめてみましたが、他にも方法があればぜひ追加してください！
個人的な感想: 私は absolute margin auto、flex、absolute、transform が好みです。モバイル端末では flex を使用するのが最善です。絶対マージン auto が好きです
おすすめの関連チュートリアル:CSS ビデオ チュートリアル、CSS3 ビデオ チュートリアル
以上がCSSで縦横中央配置を実現する方法をお話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。