css centering_html/css_WEB-ITnose

目次

1. 1. インライン要素のセンタリング方法
   2. 1. 複数のブロック要素のセンタリング方法
      2. 複数のブロック要素を縦方向かつ中央に積み重ねる方法
2. 1. 1. 高さが不明な場合/unfixed
3. 1. 高さ不定・不確定の実装方法

この記事は、centering-css-complete-guide 記事の不完全な翻訳です。英語レベルと CSS レベルの関係で、一部は私の理解に基づいています。翻訳/理解の間違い、または記事のその他の問題がある場合は、アドバイスをお願いします。

元のアドレス: https://css-tricks.com/centering-css-complete-guide/

原著者: CHRIS COYIER

水平方向の中央揃え

インライン要素の中央揃えメソッドの場合

インライン要素の水平方向の中央揃えには、ブロックの親要素のスタイルを次のように設定する必要があります:

.center-childred { text-align: center;}

たとえば、リンクまたはテキスト要素を中央に配置する例:

CodePen の Chris Coyier (@chriscoyier ) による「Pen Centering Inline Elements」を参照してください。 🎜 > このメソッドは、inline、inline-block、inline-table、inline-flex などに適用できます。

ブロックレベル要素のセンタリング方法

ブロックレベル要素の margin-left と margin-right を auto に設定することで水平方向のセンタリングを実現できますが、ブロック要素には幅を与える必要がありますそうでない場合は、中央揃えではなく全幅になります。設定方法は以下の通りです。

.center-me { margin: 0 auto;}

ブロック要素の幅を設定する場合、margin: 0 auto; を使用すると要素が中央に配置されます。

margin: 0 auto を適用したオブジェクトに幅を指定すると、オブジェクトは親コンテナ内の中央に配置されます。

2 番目のパラメータとして auto を指定すると、基本的にブラウザは左右のマージンを自動的に決定し、左右のマージンが同じサイズに設定されることが保証されます。最初のパラメータ 0 は、上マージンと下マージンが両方とも 0 に設定されることを示します。

margin-top:0;

margin-bottom:0;

margin-left:auto ;

margin-right:auto;

したがって、例を挙げると、親が 100px、子が 50px の場合、auto プロパティmargin-left と margin-right の間に共有する空き領域が 50 ピクセルあると判断します:

var freeSpace = 100 - 50;

varqualShare = freeSpace / 2;

これは次のようになります:

margin-left:25;margin-right:25;

デモは次のとおりです:

を参照してください。 CodePen の guihailiuli ( @guihailiuli ) によって中央に配置された Pen ブロック要素

width: 400px; をコメントアウトすると、div は中央に配置されず、コンテナーを左から右に埋めます。

この方法を使用すると、ブロック要素の幅が親要素の幅よりも大きい場合、子要素の幅が親要素の幅を超えてしまい、中央揃えができなくなる場合があります。幅: 600ピクセル;。

margin についての補足: 0 auto;

ブロックレベルの要素の幅を設定すると、要素がコンテナーを左から右に埋めるのを防ぐことができます。次に、左右のマージンを自動に設定して水平方向の中央に配置できます。要素は指定した幅を占め、残りの幅は左右の 2 つのマージンに分割されます。
ブラウザ ウィンドウが要素の幅より狭い場合、ブラウザはページに合わせて水平スクロール バーを表示します。この場合、width の代わりに max-width を使用すると、次のようになります。ブラウザ (IE7 以降を含むすべてが最大幅をサポート) が小さなウィンドウをより適切に処理できるようにします。これはモバイル デバイスでは特に重要です。
最も外側のレイヤーで float:left または float:right を誤って中央に設定すると、設定 margin:0 の自動レイアウトも中央に配置されなくなる場合があります。水平に。その理由は、{margin: 0 auto;} により、width 属性を持つブロックレベルの要素を水平方向に中央に配置できるためです。ただし、通常は静的要素でのみ機能します (フローティングや位置決めはありません)。要素がフローティング要素として宣言されている場合、そのレイアウトはドキュメント フローの外に移動され、auto のセンタリングは有効になりません。
github の margin: 0 auto; で非常に興味深いコメントを見つけました。 原文は次のとおりです。

このコードの関数は次のとおりです。フロントエンド 誰でも理解できること: ブロック要素を水平方向に中央揃えにすること。一般に、誰もが次のように書きます:

.content {

width: 980px;

margin: 0 auto;

}

上面的代码能正常工作，大部分情况下也不会有问题，但上面的代码存在思维的懒惰。写成:

.content {

width: 980px;

margin-left: auto;

margin-right auto;

}

看起来代码变多了，变啰嗦了。但如果你真经过思考，就会明白：

1. margin: 0 auto 中的 0 绝大部分情况下是冗余的，页面上早就有 reset.css 或 normalize.css 重置过
2. margin: 0 auto 不纯粹，你要的是“水平居中”，却顺便把 top / bottom 给重置了 不纯粹会导致顺序和优先级的依赖，比如有另一处要给 margin-top/bottom 赋值时，就必须要提高优先级

进一步的东西是，我一直觉得CSS里，有一个重要的原则： 最小影响原则

你在写某段CSS代码时，首先要非常清楚地知道这段CSS代码的功能，其次要尽量严格保障这段CSS代码只实现了你想要实现的功能。

这就如医生动手术，好好做好本分就行，千万别留下一个小镊子在病人身体里。

与HTML代码一样，对CSS代码来说，很重要的两个衡量标准也是稳定和灵活。这里不多说了。

熟悉设计模式的，应该会感知到，最小影响原则和单一职责原则（SRP）本质上是一样的。SRP 作为设计模式的重要原则之一，其重要性不用我在此啰嗦了。

多个块状元素的居中方法

如果有多个块状元素需要水平居中在一行，很可能你会想到改变他们的display属性为 inline-block ，或者用flexbox。

例如：

See the Pen Centering Row of Blocks by Chris Coyier ( @chriscoyier ) on CodePen .

多个块状元素在竖直方向上堆在一起居中的方法

这种情况使用 margin: 0 auto; 一样有效

See the Pen Centering Blocks on Top of Each Other by Chris Coyier ( @chriscoyier ) on CodePen .

垂直居中

行内元素的垂直居中

对单行元素

一些行内元素/文本元素，将他们padding的top和bottom值设为一致就可以

.link { padding-top: 30px; padding-bottom: 30px;}

对单行元素进行垂直对齐：

See the Pen Centering text (kinda) with Padding by Chris Coyier ( @chriscoyier ) on CodePen .

如果出于一些原因不想选择 padding ,在居中文本时一样可以使用 line-height ，可以使文本的高度处于中心

.center-text-trick { height: 100px; line-height: 100px; white-space: nowrap;}

效果如下:

See the Pen Centering a line with line-height by Chris Coyier ( @chriscoyier ) on CodePen .

对多行元素

针对这种情况可以使用 vertical-align

See the Pen Centering text (kinda) with Padding by Chris Coyier ( @chriscoyier ) on CodePen .

如果不使用table,也可以使用flexbox， 用法如下:

.flex-center-vertically { display: flex; justify-content: center; flex-diretion: column; height: 400px;}

效果：

See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier ( @chriscoyier ) on CodePen .

使用这种方法需要相关的父元素有一个固定的高度(px,%等)

还有第三种方法是采用称为 ghost element 的技术，

用法如下：

.ghost-center { position: relative;}.ghost-center::height { content: " "; display: inlie-block; height: 100%; width: 1%; vertical-align: middle;}.ghost-center p { display: inline-block; vertical-align: middle;}

效果：

See the Pen Ghost Centering Multi Line Text by Chris Coyier ( @chriscoyier ) on CodePen .

PS:个人水平太菜，对这种ghost element方法不懂，只是从原文搬过来，具体介绍请查看原文。

块状元素的垂直居中

在大多数页面布局中，高度是不知道的，比如当页面宽度发生变化时， text reflow 会使高度发生变化，当图片宽度调整时也会改变高度，等等情况

但是，如果知道了高度，就可以用下面的居中方法。

在固定高度的情况下

使用方法：

.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px;}

实现的原理:

实现效果：

See the Pen Center Block with Fixed Height by Chris Coyier ( @chriscoyier ) on CodePen .

在不知道/不固定高度的情况下

这种情况下可以通过 transform: translateY() 方法推动块状元素一半的高度来实现居中.

使用方法:

.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}

关于 transform: translate() 方法的补充：

translate 表示移动，该属性值含 3 种情况：translate(x,y) 水平方向和垂直方向同时移动（也就是 X 轴和 Y 轴同时移动，即斜一定角度移动）；translateX(x) 仅水平方向移动（X 轴移动）；translateY(Y) 仅垂直方向移动（Y 轴移动），举个例子：

transform:translateY(20px); // 表示由基点处沿垂直方向向下移动 20px

实现效果：

See the Pen Center Block with Unknown Height by Chris Coyier ( @chriscoyier ) on CodePen .

当然，也可以用flexbox实现：

.parent { display: flex; flex-direction: column; justify-content: center;}

实现效果：

See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier ( @chriscoyier ) on CodePen .

水平垂直居中

固定宽高的居中方法

利用 负margin 技术实现

.parent { position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;}

实现效果：

See the Pen Center Block with Fixed Height and Width by Chris Coyier ( @chriscoyier ) on CodePen .

不固定/不确定高度的实现方法

可以通过两个方向都使用 transform: translate; 来实现

使用方式：

.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

实现效果：

See the Pen Center Block with Unknown Height and Width by Chris Coyier ( @chriscoyier ) on CodePen .