序文

私の意見では、最も厄介なの方法は、中心の様々なCSSのCSSエントリです。私の初心者CSSの過程で、多くの場合、私を気に、この問題を中心に。なぜこれほど迷惑なことを中心にCSS？私はあまりにも多くのCSSの方法とその範囲を中心としたためであると考えて、それが難しい適用して有効な最後に区別することができました。ここで私は簡単にソート何CSSからのアプローチを中心にします。

水平センター

1.中心線内の水平要素

：水平線（例えば、テキスト、リンク要素またはinline- *）中央内の要素

.inline {
  text-align: center;
}

そのような方法は、インライン、ブロック、インラインテーブルなどに有効です。

2.ブロックレベル要素の水平方向の中心

水平方向の中心にブロックレベル要素（例えば、DIV、P、等）のために：

.block {
    margin: 0 auto;
}

このメソッドは、autoにマージン左マージン、右のセットです。しかし、このアプローチの前提は、そうでない場合は、その親要素の幅でカバーされます、あなたは良いブロックレベル要素の幅を設定すべきであるということです。

中心水平ブロックレベル要素の3 Aの複数

中央の行の場合、複数のブロック要素、我々は、インラインブロック又はフレックスにそれらを設定することができます。

1）インラインブロック

.inline-block-center {
    display: inline-block;
    text-align: right;
}

2）フレキシボックス

.flex-center {
  display: flex;
  justify-content: center;
}

垂直方向の中心

私は（実現可能な方法を含む）垂直方向の中央方法を整理して考えるの漸進的なプロセスに従います下に垂直センターセンターは、レベルよりも複雑であるために：

1）

中央のブロックレベル要素のレベルは、マージンを使用することができるので：0自動車、次いで垂直中心は、マージンを使用することはできません：自動0は？することはできません。などの自動車のようマージントップ、デフォルト値は0です。

2）

OK、私は手動でマージントップ利用カルクを指定する必要があります

margin-top: calc(50%-50px);

だから、いつも大丈夫？いいえ。マージントップパーセンテージが実際に参照として親要素の幅であるからです。

3）

まあ、私はそれを相対的な使用します。

position: relative;
top: calc(50%-50px);

これは、常にラインです。しかし、欠点は、この方法は、要素の高さを変更しないということです。

4）

インライン要素とテーブルセルのために、左の垂直中心ALIGNは=も縦長に使用することができます。

display: table-cell;
vertical-align: middle;

しかし、テーブルのセル時刻からインライン、幅およびサブ要素が同じになり、ときに強制幅を100％として指定され、サブエレメントの高さは同じ親要素となります。

5）

擬似要素の使用：

<div class="box">
    <span>垂直居中</span>
</div>

.box {
  width: 400px;
  height: 300px;
  border:1px solid red;
  text-align:center;
}

.box:before {
  content:'';
  display:inline-block;
  height: 100%;
  vertical-align:middle;
}

.box span {
  vertical-align:middle;
}

このアプローチの前提は、インライン要素がセンタリングする場合ということです。
なぜ有効となり、ここで擬似要素を追加しますか？垂直整列W3C規格に従って定義：このプロパティは、カセット内に行レベルの要素によって生成された枠線の内側の垂直方向の配置に影響を与えます。

次いで、これを空のカートリッジ内の行のダミー素子でカセット素子の高さの100％を生成し、このために、ベースラインとして内側垂直中心線を線です。

6）

フレックスレイアウトを使用します。

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

水平および垂直方向の中心

水平方向と垂直方向の中心を中心に、多くの方法があり、それが面倒です。いくつかの方法は、（ダミー素子テキストアライン+垂直整列を添加するなどの方法）結合方法を中心に上下左右中心にすることができ、私はここで説明したが、導入するための最良の方法はありません - 非常に汎用性フレックスレイアウト：

.container {
  display: flex;
  justify-content: center; 
  align-items: center;
}

正当化コンテンツスピンドルオンフレックス項目の着弾位置と、ALIGN-項目がフレックス項目十字軸の位置に影響を与えます。

エピローグ

上記の方法は、CSSとのそれぞれの場合に、実質的に中央に達成することができます。読者はどのサプリメントや間違った場所について感じた場合、私を修正してください。

CSSセンターの様々な

序文