ホームページ > 記事 > ウェブフロントエンド > CSSでの縦横中央揃えの実装方法まとめ（コード付き）
CSSでの縦横中央揃えの実装方法まとめ（コード付き）
- 不言転載
- 2018-10-17 15:26:472350ブラウズ
この記事はCSSでの垂直方向と水平方向のセンタリングの実装方法をまとめたものです(コード付き)。必要な方は参考にしていただければ幸いです。
最近、面接で次のような質問がよく見られます。CSS を使用して垂直方向と水平方向の中央揃えを実現する方法をいくつか教えてください。 CSS の基礎を読んでいるときに、完全なセンタリングについて説明した記事を見つけました。
#1 の記事の内容を要約します。 ##1.1 具体的なコードは次のとおりです:
.container {
position: relative;
}
.absolute_center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
padding: 20px;
overflow: auto;
}
<div> <div> <ul> <li> 该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性 </li> </ul> </div> </div>
##1.2 の核となるアイデアこの方法は次のとおりです。
位置決めとレイアウトに絶対を使用し、ブロック要素の通常の流体プロパティから脱却し、絶対の流体プロパティを通じて垂直方向と水平方向のセンタリングを完了します。
知っておくべき基本的な知識ポイントが 2 つあります:
1. 流体プロパティ: div 要素などのブロック状の水平要素は次のとおりです。デフォルト (非フローティング、絶対配置など) では、margin-left/margin-right、padding-left/padding-right、border-left-width/border がある場合、水平方向が自動的に外側のコンテナを埋めます。 -right-width など、実際のコンテンツ領域は縮小に対応します。 2. 絶対的な流体プロパティ:
デフォルトでは流体プロパティがありませんが、この条件は「位置決め」です。 「同時に反対方向に位置する場合」、つまり、左右が水平方向に位置し、上下が垂直方向に位置し、反対方向に同時に位置決め値がある場合、絶対的な流体特性が発生します。
1.3 利点と欠点:
利点:
1. 優れた互換性、絶対流体特性は IE7 と互換性があります。すべての最新のブラウザと互換性があります。
4. コンテンツの幅と高さの書き込みもサポートされます。サポートされている;
欠点:
1. コンテンツの高さが規定値を超える場合は、オーバーフロー属性を追加する必要があります。外側のコンテナのオーバーフロー;
#、負のマージン
これは、要素の高さと幅を固定する場合に現在最もよく使用される方法です。値を指定し、要素を相対レイアウトに設定してドキュメント フローから外し、top: 50%; left: 50%; を設定し、margin-left と margin-top を使用して要素を完全に中央に配置します。
2.1 具体的なコードは次のとおりです:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Negative {
position: absolute;
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
background-color: cornsilk;
}
<div> <div> </div> </div>
##2.2 の核となるアイデアこの方法は次のとおりです:
相対レイアウトを使用し、top と left を使用してコンテンツをコンテナーの中央に配置し、margin を使用してオフセットを制御します。 
box-sizing:border-box 属性を使用する場合、オフセットによってボーダーとパディングを計算する必要はありません。
2.3 長所と短所:
長所:
2 を含む優れた互換性。 HTML 要素をマークし、コードを少なくします。欠点:
1. 応答性がなく、パーセンテージと最小/最大値を使用できません。
#2. オーバーフロー属性を追加する必要があります。コンテンツのテキストの高さが外側のコンテナを超える場合のオーバーフローを防ぐため。3. 要素が box-sizing:border-box を使用し、デフォルトのコンテンツ ボックス オフセットを使用する場合は、値が異なるため、再計算する必要があります。
#3.1 具体的なコードは次のとおりです:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: darkseagreen;
}
<div> <div> <ul> <li> 该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量 </li> </ul> </div> </div>
##3.2 このメソッドの中心的な考え方は次のとおりです:
相対レイアウトを使用し、上と左を使用してコンテンツをコンテナの中央に配置します。次に、transform を使用してオフセット量を制御します。
3.3 利点と欠点:
利点:
1. コンテンツの幅と高さは適応可能です。 ;2. コードの量が少ない 欠点:
2. さまざまなブラウザと互換性を持たせるためには、いくつかの追加の CSS プレフィックスが必要です。##3。 ##4. この場合、特にtransform-style:preserve-3d属性が使用されている場合、これはブラウザのレンダリングの問題です。これは最良の垂直方向の中央揃えの解決策である可能性がありますが、最大の問題があります。 table-cell を使用して垂直方向の中央揃え効果を完成するには、追加の HTML 要素が必要です。
4.1 具体的なコードは次のとおりです:.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Table {
display: table;
}
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: deepskyblue;
}
<div> <div> <div> 使用table-cell完成垂直水平居中 </div> </div> </div>
@import "./absolute_center4.png"{width="50%"}
4.2 该方法的核心思想是：
使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。
具体操作步骤如下：
1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。
4.3 优缺点：
优点：
1.内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；
缺点：
1.完成一个垂直居中效果，需要3个html元素；
五、使用Inline-block
这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。
5.1 具体代码如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Inline {
text-align: center;
overflow: auto;
}
.container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
background-color: greenyellow;
padding: 20px;
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
<div> <div> 使用inline-block完成水平垂直居中 </div> </div>
5.2 该方法的核心思想是：
和table有点类似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；
5.3 优缺点：
优：
1、内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；
缺：
1.依赖margin-left：-0.25em来矫正水平方向居中的误差；
2.内容的宽度必须小于容器的宽度减去0.25em。
六、使用Flexbox
弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。
6.1 具体代码如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.center_block {
background-color: wheat;
padding: 20px;
}
<div> <div> 使用flexbox完成水平垂直居中 </div> </div>
6.2 该方法的核心思想是：
使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;
6.3 优缺点：
优：
1.内容宽度、高度自适应,即便文本溢出也很优雅；
2.可以使用很多弹性布局的新特性；
缺：
1.兼容性比较差，目前只有IE10以上兼容；
2.需要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差异；
以上がCSSでの縦横中央揃えの実装方法まとめ（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。