CSS 縦横フルセンタリングマニュアル-CSSチュートリアル-php.cn

CSS 縦横フルセンタリングマニュアル

高洛峰

リリース： 2017-02-04 16:01:47

オリジナル

1289 人が閲覧しました

センタリングは常に CSS における典型的な問題でした。なぜ実装がこれほど難しいのでしょうか?それで誰かに笑われました。問題は、方法がないということではなく、状況によると思います。さまざまな方法がありますが、どの方法を使用するかを理解するのは困難です。

それで私は彼が楽になることを願ってこの記事を書きました。

水平方向の中央揃え

インライン要素 (inline または inline-*) を中央揃えにしますか?

親ブロックレベル要素を基準にして中央揃えにすることができます

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

ログイン後にコピー

ブロックレベル要素 (ブロックレベル) を中央揃えにしますか?

マージンを設定できます- left と margin-right は中央揃えに自動で設定されます (幅も設定する必要があります。そうしないとコンテナ全体が埋まってしまい、中央揃えの効果が見えなくなります)。

.center-me {
  margin: 0 auto;
}

ログイン後にコピー

ブロックレベルの要素がたくさんある場合はどうなるでしょうか?

非常に均等なブロックレベルの要素を水平方向に中央揃えで行内に配置する必要がある場合は、別の表示タイプを使用することをお勧めします。以下は、inline-block と flex を使用した例です。

<main class="inline-block-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>
<main class="flex-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>

ログイン後にコピー

rree

垂直方向のセンタリング

CSS では垂直方向のセンタリングは少し難しいです

テキストやリンクなどのインライン要素 (inline または inline-*) をセンタリングしますか?

一行ですか？

上下のパディングが等しいという理由だけで、要素が垂直方向に中央揃えであるかのように動作することがあります

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

ログイン後にコピー

何らかの理由でパディングが機能せず、テキストが折り返されない場合は、line-height を使用して一致させることができますテキストを同じ高さに揃えて配置します。

rreee

複数行ですか？

top やbottom などの Padding メソッドでも複数の行を中央揃えにすることができますが、このメソッドが機能しない場合は、これらのテキストのコンテナを表のセルモードで表示してから、テキストのvertical-align 属性を設定できます。 talbe と同じように、整列するテキストです。つまり、

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

ログイン後にコピー

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

ログイン後にコピー

ブロックレベル要素は垂直方向に中央揃えになりますか?

要素の高さは知っていますか?

Web ページのレイアウトの高さがわからないことは、さまざまな理由から非常に一般的です。

ただし、レイアウトの高さが固定されている場合は、次のように垂直方向に中央揃えにすることができます:

<table>
  <tr>
    <td>
      I&#39;m vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I&#39;m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

ログイン後にコピー

要素の高さは不明です

不明ですが、50 ずつ押し上げることは可能です幅の %

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

ログイン後にコピー

フレックスボックスは使えますか?

それは驚くことではありません、フレックスボックスを使用するとはるかに簡単です

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

ログイン後にコピー

rree

水平方向と垂直方向を同時に中央揃え

要素の幅と高さは固定です

要素の幅と高さの場合が固定されている場合は、最初に完全に中央に配置してから、幅の 50% だけ上と左に移動する必要があります。このソリューションは、優れたクロスブラウザーのサポートを備えています。

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

ログイン後にコピー

要素の幅と高さが不明です

高さと幅（変数）がわからない場合は、transofrmプロパティを使用して両方向にマイナス50%を変換できます

<main>  
  <div>
     I&#39;m a block-level element with an unknown height, centered vertically within my parent.
  </div>  
</main>

ログイン後にコピー

その他のCSS垂直水平完全中央マニュアル関連の記事については、PHP 中国語 Web サイトに注目してください。