☰

要素を水平方向と垂直方向に中央揃えにする方法 質問する

tag-icon • tag-icon html css layout alignment centering
要素を水平方向と垂直方向に中央揃えにする方法 質問する

タブのコンテンツを垂直方向に中央揃えにしようとしていますが、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

CSS フレックスボックス / グリッド方式:

例はこちら/全画面例

でサポートされているブラウザ、display対象要素の を に設定し、垂直方向の中央揃えには を、水平方向の中央揃えには をflex使用します。親コンテナーにも高さ (この場合は 100%) が必要であることに注意してください。align-items: centerjustify-content: center

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

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

transform translateX/translateY方法：

例はこちら/全画面例

でサポートされているブラウザ(ほとんどの場合)、top: 50%/left: 50%と組み合わせて使用​​することで、translateX(-50%) translateY(-50%)要素を動的に垂直/水平に中央揃えすることができます。

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

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>

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>

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

おすすめ記事