CSSセンタリングを実装する5つの方法についてはすでに述べましたが、インタビュアーはそれだけでは不十分だと言っていますか？

これは中心の配置の要約です

始める前に、センタリングの方法をいくつ知っていますか？

面接中に2、3と答えるのは良いことですが、面接官から続行を求められるのではないかと思います。今日は、これらのセンタリング方法を要約しましょう

フレックスレイアウト設定を使用して中央に配置されます。
フレックスを使用する場合、子にマージン：自動を設定することでセンタリングを実現することもできます。
絶対位置決めを使用して、水平および垂直のセンタリングを実現します。
グリッドを使用してセンタリングを設定します。
グリッドを使用する場合、子アイテムにmargin：autoを設定することでセンタリングを実現することもできます。
垂直方向のセンタリングを実現するには、テーブルセルを使用します。
垂直方向のセンタリングを実現するためのあまり一般的ではない方法もあります。
最後に、奇妙な方法があります。コンテナは位置を設定します：相対。子は上、左、下、右を0に設定します

1.フレックスレイアウト設定が中央に配置されます

一般的な方法は、flexレイアウト設定を使用して中央に配置することです。

弾性レイアウト（flex）を使用して水平方向のセンタリングを実現します。ここでjustify-content、は弾性ボックス要素の主軸（水平軸）方向の配置を設定するために使用されます。

コンテナを設定します。

display: flex;親要素に記述され、これはフレックスコンテナを定義します
justify-content 主軸の配置、デフォルトは水平軸です
align-items垂直軸の配置。デフォルトは垂直軸です。

利点：シンプル、便利、高速、3行のコードで取得できます。

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
  justify-content: center; //纵轴对齐方式，默认是纵轴
}
.child {
  background: red;
}  
</style>

代码片段

2.flex-子アイテムを設定します

最初の方法は、親ボックスのプロパティを設定することです。これは、中央揃えをmargin: auto実現するように子ボックスを設定することです。コンテナのdisplay: flex;子margin: auto;

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: flex;
}
.child {
  background: red;
  margin: auto; // 水平垂直居中
}  
</style>

代码片段

3.絶対ポジショニング

絶対位置決めを使用して、水平および垂直のセンタリングを実現します。コンテナ設定position: relative。子要素の設定position: absolute;;;;;left: 50%top: 50%transfrom: translate(-50%, -50%)

利点は、子要素の長さと幅を気にする必要がないことですが、このメソッドの互換性はtranslate2dの互換性に依存します

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}  
</style>

代码片段

4.tabel-cellが垂直センタリングを実現

cssの新しいテーブル属性により、通常の要素をテーブル要素のリアルな効果に変えることができます。この機能により、水平方向と垂直方向のセンタリングも実現できます。

而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

使用tabel-cell实现垂直居中,容器设置 display: table-cell;;
vertical-align: middle属性设置元素的垂直对齐方式
子元素如果是块级元素，直接使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;  // 设置元素在垂直方向上的对齐方式
  text-align: center;
}
.child {
  background: red;
  display: inline-block;
}  
</style>

代码片段

5.grid设置居中

使用grid设置居中。给容器设置 display: grid; align-items: center; justify-content: center;

通过给容器设置属性，达到居中效果,但是这种方式兼容性较差，不推荐。

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: grid;
  align-items: center;
  justify-content: center;
}
.child {
  background: red;
}  
</style>

代码片段

6.grid给子项设置

使用grid时还能通过给子项设置margin: auto;实现居中。给容器设置 display: grid; 子项设置 margin: auto;

某些浏览器会不支持grid布局方式，兼容性较差，不推荐。

<div class="box">
 <div class="child">水平垂直居中</div>
</div>

<style>
.box {
 width: 200px;
 height: 200px;
 border: 1px solid;
 display: grid;
}
.child {
 background: red;
 margin: auto;
}  
</style>

代码片段

7.给容器加给伪元素

这是一种不常用的方法实现垂直居中。给容器加给伪元素，设置line-height等于容器的高度。给孩子设置display: inline-block;

此种方式适合给文本设置水平垂直居中

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.box::after {
  content: "";
  line-height: 200px;
}
.child {
  display: inline-block;
  background: red;
}
  
</style>

代码片段

8.还有一种奇葩的方法

这个奇葩方式和第三种使用绝对定位相似，只不过需要给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto；也能实现垂直水平居中。

<div class="box">
  <div class="child">水平垂直居中</div>
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
}
.child {
  background: red;
  width: 100px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}  
</style>

代码片段

以上就是一些我们常用的垂直居中的方案。

由于垂直居中往往需要修改display属性，所以就会在排版上造成一些影响。例如不该用flexbox的地方如果用了flexbox，不该用table的地方用了table，不该用inline-block的地方用了inline-block，后续反而要多写许多其他的定位样式来修正，那就有点得不偿失了。因此如何活用这些CSS垂直居中的方法，就要看大家的版面结构而灵活运用

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。