[解決済み] 要素を水平方向と垂直方向の中央に配置する方法

2022-03-19 20:52:06

質問

タブのコンテンツを縦方向にセンタリングしたいのですが、CSSスタイルに display:inline-flex の場合、水平方向のテキストアラインが消えます。

各タブのテキストアラインメントをxとyの両方にするにはどうしたらいいですか？

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

解決方法は？

アプローチ1 transform translateX / translateY :

ここから例 / 全画面表示例

で対応ブラウザ (ほとんどの場合) では top: 50% / left: 50% と合わせて translateX(-50%) translateY(-50%) を使用すると、動的に要素を垂直/水平方向にセンタリングすることができます。

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

アプローチ2 - Flexbox方式。

サンプルはこちら / 全画面表示例

で対応ブラウザを設定します。 display を、対象となる要素の flex を使用し align-items: center は垂直方向のセンタリングに使用し justify-content: center は水平方向のセンタリングに使用します。ブラウザの追加サポートのためにベンダープレフィックスを追加することを忘れないでください ( 例を見る ).

html, body, .container {
    height: 100%;
}

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

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

アプローチ3 table-cell / vertical-align: middle :

ここから例 / 全画面表示例

場合によっては html / body 要素の高さを 100% .

垂直方向のアライメントには、親要素の width / height から 100% を追加し display: table . 次に、子要素の display から table-cell を追加し vertical-align: middle .

水平方向のセンタリングを行うには text-align: center でテキストをセンタリングし、他の inline の子要素を使用します。あるいは margin: 0 auto であると仮定すると、その要素は block レベルになります。

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

アプローチ4 - 絶対位置決め 50% を上からズラして。

ここから例 / 全画面表示例

この方法は、テキストの高さが既知であることを前提にしています。 18px . 要素を絶対に配置するだけです。 50% 親要素を基準として、上から順に表示します。負の margin-top の値は、その要素の既知の高さの半分であり、この場合は - となります。 -9px .

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

アプローチ5 - その line-height メソッド（最も柔軟性が低い - 推奨されません）。

ここから例

場合によっては、親要素の高さが固定されることがあります。垂直方向のセンタリングを行うには、親要素に line-height の値は、親要素の固定された高さと等しくなるように子要素に設定します。

この解決策は場合によっては有効ですが、テキストが複数行ある場合はうまくいかないので注意が必要です。このように .

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

[解決済み] 要素を水平方向と垂直方向の中央に配置する方法

質問

解決方法は？

アプローチ1 transform translateX / translateY :

アプローチ2 - Flexbox方式。

アプローチ3 table-cell / vertical-align: middle :

アプローチ4 - 絶対位置決め 50% を上からズラして。

アプローチ5 - その line-height メソッド（最も柔軟性が低い - 推奨されません）。

関連

最新

おすすめ

アプローチ1 `transform` `translateX` / `translateY` :

アプローチ3 `table-cell` / `vertical-align: middle` :

アプローチ4 - 絶対位置決め `50%` を上からズラして。

アプローチ5 - その `line-height` メソッド（最も柔軟性が低い - 推奨されません）。