CSS 縦方向横方向完全中央揃え手動-CSSチュートリアル-php.cn

CSS 縦方向横方向完全中央揃え手動

伊谢尔伦

リリース： 2016-11-23 09:21:27

オリジナル

1157 人が閲覧しました

水平方向の中央揃え

インライン要素の中央揃え(inline or inline-*)?

親ブロックレベル要素を基準にして中央揃えが可能

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

ログイン後にコピー

ブロックレベル要素の中央揃え(ブロックレベル)?

あなたSet margin-left と margin-right を auto に渡して中央に配置することができます (幅も設定します。そうしないとコンテナ全体が埋まってしまい、中央揃えの効果が見えなくなります)。

.center-me {
  margin: 0 auto;
}

ログイン後にコピー

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

非常に均等なブロックレベルの要素を水平方向に中央揃えで並べる必要がある場合は、別の表示タイプを使用する方が良いでしょう。以下は、inline-block と flex を使用した例です。

オンライン例: http://jsfiddle.net/ourjs/0b6b7wt8/

<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>
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;
}

ログイン後にコピー

垂直方向のセンタリング

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

テキストのようなインライン要素 (inline または inline-*) のセンタリングそしてリンクもそうなの？

一行ですか？

場合によっては、要素の上下のパディングが等しいという理由だけで、要素が垂直方向の中央に配置されているかのように動作することがあります

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

ログイン後にコピー

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

rreee

複数行ですか？

上下のパディングを使用して複数の行を中央揃えにすることもできますが、この方法が機能しない場合は、これらの単語のコンテナを表のセルモードで表示し、テキストの垂直方向の配置属性をtalbe のように整列します

オンラインデモ: http://jsfiddle.net/ourjs/0fn2u4rc/

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

ログイン後にコピー

<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>

ログイン後にコピー

ブロックレベル要素 (ブロックレベル) 垂直方向のセンタリング?

要素の高さはご存知ですか?

さまざまな理由から、Web レイアウトの高さがわからないことはよくあります。

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

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;
}

ログイン後にコピー

要素の高さは不明です

不明ですが、それでも50%押し上げることは可能ですwidth

オンラインデモ: http ://jsfiddle.net/ourjs/9sLf7p56/

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

ログイン後にコピー

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

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

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

ログイン後にコピー

rreeee

水平方向と垂直方向に同時に中央揃えします

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

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

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

ログイン後にコピー

　元素的宽度高度未知

　　如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

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

ログイン後にコピー

CSS 縦方向 横方向 完全中央揃え 手動

CSS 縦方向横方向完全中央揃え手動