CSSでテキストを垂直方向に中央揃えするにはどうすればよいですか?

2012年01月15日に質問されました。  ·  閲覧回数 3.4M回  ·  ソース

Irakli Lekishvili picture
2012年01月15日

テキストを含む<div>要素があり、この<div>の内容を垂直方向の中央に揃えたいと思います。

これが私の<div>スタイルです:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

この目標を達成するための最良の方法は何ですか?

回答

Michiel van Oosterhout picture
2012年01月15日
2944

この基本的なアプローチを試すことができます。

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

ただし、行の高さを包含ボックス要素と同じ高さに設定しているため、1行のテキストに対してのみ機能します。


より用途の広いアプローチ

これは、テキストを垂直方向に揃えるもう1つの方法です。 このソリューションは、1行および複数行のテキストに対して機能しますが、それでも固定の高さのコンテナーが必要です。

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Hello World!</span>
</div>

CSSは<div>サイズを設定するだけで、 <div>の行の高さをその高さに等しく設定することで<span>垂直方向に中央揃えにし、 <span> vertical-align: middleインラインブロック。 次に、 <span>の行の高さを通常に戻し、その内容がブロック内を自然に流れるようにします。


テーブル表示のシミュレーション

また、別のオプションがあります。これは、 display: tableおよびdisplay: table-cellサポートしていない古い機能しない可能性があり

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Hello World!</span>
</div>

絶対位置決めの使用

この手法では、上、下、左、右を0に設定する絶対位置の要素を使用します。詳細については、Smashing Magazine、 CSSの絶対水平および垂直センタリングの記事を参照してください。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}
<div>
  <span>Hello World!</span>
</div>
Danield picture
2014年03月06日
1310

別の方法(ここではまだ言及されていません)は、 Flexboxを使用することです。

コンテナ要素に次のコードを追加するだけです。

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexboxデモ1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

または、コンテナを介してコンテンツを整列する代わりに、フレックスコンテナにフレックスアイテムが1つしかない場合(上記の質問の例のように)、フレックスボックスは自動マージンでフレックスアイテムを中央に配置することもできます。

したがって、フレックスアイテムを水平方向と垂直方向の両方の中央に配置するには、 margin:auto設定するだけです。

Flexboxデモ2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

注意:上記はすべて、アイテムを水平方向の行ます。 デフォルトではflex-directionrowであるため、これはデフォルトの動作でもあります。 ただし、フレックスアイテムを垂直列に配置する必要がある場合は、コンテナにflex-direction: columnを設定して、主軸を列として設定し、さらにjustify-contentalign-itemsプロパティは、今で周りの他の方法で作業justify-content: center垂直方向にもセンタリングおよびalign-items: center水平中心)

flex-direction: columnデモ

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Flexboxから始めて、その機能のいくつかを確認し、ブラウザーを最大限にサポートするための構文を取得するのに適した場所は、 flexyboxesです。

また、最近のブラウザのサポートは非​​常に優れています: caniuse

display: flexalign-itemsブラウザー間の互換性のために、以下を使用できます。

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Ariful Islam picture
2012年01月15日
142

これは、次のCSSコードを追加することで簡単に実行できます。

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

つまり、CSSは最終的に次のようになります。

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>
BAR picture
2014年10月26日
120

参考のために、そしてより簡単な答えを追加するために:

純粋なCSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

またはSASS / SCSS Mixinとして:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用者:

.class-to-center {
    @include vertical-align;
}

SebastianEkströmのブログ投稿によると、CSSのわずか3行で何でも垂直に揃えます

この方法では、要素が「ハーフピクセル」に配置されるため、要素がぼやける可能性があります。 これに対する解決策は、親要素をpreserve-3dに設定することです。 次のように:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

私たちは2015+に住んでいるとFlexのボックスはすべての主要な近代的なブラウザでサポートされています。

これからはウェブサイトの作り方になります。

学べ!

ankitd picture
2014年08月11日
64

すべてのクレジットは、このリンクの所有者@SebastianEkströmに行くのリンク。 これを通過してください。 アクションcodepenでそれを参照してください。 上記の記事を読んで、デモフィドルも作成しまし

たった3行のCSS(ベンダープレフィックスを除く)で、変換の助けを借りてそれを行うことができます。translateYは、高さがわからなくても、必要なものを垂直方向に中央揃えします。

CSSプロパティ変換は通常、要素の回転とスケーリングに使用されますが、そのtranslateY関数を使用して、要素を垂直方向に整列できるようになりました。 通常、これは絶対位置または行の高さの設定で行う必要がありますが、これらでは要素の高さを知っているか、単一行のテキストでのみ機能する必要があります。

したがって、これを行うには、次のように記述します。

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

必要なのはそれだけです。 これは絶対位置法と同様の手法ですが、要素に高さを設定したり、親に位置プロパティを設定したりする必要がないという利点があります。 Internet Explorer 9でも、箱から出してすぐに機能します。

さらに簡単にするために、ベンダープレフィックスを付けたミックスインとして記述できます。

MAChitgarha picture
2016年12月14日
49

CSS3フレックスボックスには小さな魔法があります。

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
p {
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm a centered box!<br/>
        Flexboxes are great!
    </p>
</section>

ヒント:テキストを中央揃えにする場合は、「キーパーツ」とマークされた上記の行を次のいずれかの行に置き換えます。

  1. 垂直方向のみ:

    margin: auto 0;
    
  2. 水平方向のみ:

    margin: 0 auto;
    

私が気付いたように、このトリックはグリッド(つまりdisplay: grid )でも機能します。

J&#252;rg picture
2014年08月28日
23

柔軟なアプローチ

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
Pranav Singh picture
2015年06月29日
20

答えとして受け入れられた解決策は、divの高さと同じline-heightを使用するのに最適ですが、テキストが折り返されているか、2行である場合、この解決策は完全には機能しません。

テキストが折り返されている場合、またはdiv内の複数行にある場合は、これを試してください。

#box
{
  display: table-cell;
  vertical-align: middle;
}

詳細については、以下を参照してください。

Saravana priyan S picture
2018年02月28日
19

以前の回答を見ましたが、それらはその画面幅でのみ機能します(応答しません)。 レスポンシブには、flexを使用する必要があります。

例:

div { display:flex; align-items:center; }
Marco Allori picture
2015年12月02日
14

このソリューションを試してください:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

CSS +を使用して構築されています。