質問内容

私は div に設定します。 display:block ( 90px height と width ) の中にテキストを入れています。

テキストを縦・横ともに中央揃えにしたい。

試してみたのは text-align:center が、垂直方向へのセンタリングがうまくいかないので vertical-align:middle が、うまくいきませんでした。

何か思い当たることはありますか？

解決方法は？

1行のテキストや画像であれば、簡単にできます。ただ、次のようにします。

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

以上です。複数行になる可能性がある場合は、多少複雑になります。しかし、次のような解決策があります。 http://pmob.co.uk/ . vertical align"を探してください。

ハックしたり、複雑なdivを追加したりすることが多いので...。できるだけシンプルにするために、私は通常、単一のセルを持つテーブルを使用してそれを行う...。

2020年に向けてのアップデート。

Internet Explorer 10 などの以前のブラウザで動作させる必要がない限り、フレックスボックスを使用することができます。それは 現在の主要なブラウザで広くサポートされています。 . 基本的に、コンテナはフレックスコンテナとして、主軸と横軸のセンタリングを合わせて指定する必要があります。

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

子要素に固定幅を指定する。これを "フレックスアイテム" と呼ぶ。

#content {
  flex: 0 0 120px;
}

例 http://jsfiddle.net/2woqsef1/1/

コンテンツをシュリンクラップするには、さらに簡単な方法があります。 flex: ... の行をフレックスアイテムから削除すると、自動的にシュリンクラップされます。

例 http://jsfiddle.net/2woqsef1/2/

上記の例は、MS EdgeやInternet Explorer 11を含む主要なブラウザでテストされています。

カスタマイズが必要な場合の技術的な注意点として、フレックスアイテムの内部では、このフレックスアイテム自体がフレックスコンテナではないため、フレックスボックスではない古い方法のCSSは期待通りに機能します。 しかし、現在のフレックスコンテナにさらにフレックスアイテムを追加すると、2つのフレックスアイテムは水平に配置されます。縦置きにするためには、フレックスコンテナ内に flex-direction: column; をフレックスコンテナに追加します。 このように、フレックスコンテナとその中の 即時 子要素を使用します。

を指定しないことで、中央揃えにする方法もあります。 center をフレックスコンテナの主軸と横軸の配分に指定し、その代わりに margin: auto を指定すると、4方向の余分なスペースがなくなり、余白が均等になるため、フレックスアイテムが全方向で中央に配置されます。これは、フレックスアイテムが複数ある場合を除き、有効です。また、このテクニックはMS Edgeでは動作しますが、Internet Explorer 11では動作しません。

2016年 / 2017年向けのアップデートです。

でより一般的に行うことができます。 transform Internet Explorer 10 や Internet Explorer 11 などの古いブラウザーでも問題なく動作します。複数行のテキストにも対応できる。

position: relative;
top: 50%;
transform: translateY(-50%);

例 https://jsfiddle.net/wb8u02kL/1/

横幅を縮めるには

上記の解決策では、コンテンツ領域に固定幅を使用しました。幅を縮小して使用するには、次のようにします。

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

例 https://jsfiddle.net/wb8u02kL/2/

Internet Explorer 10 への対応が必要な場合は、フレックスボックスが機能しないため、上記の方法と line-height メソッドが動作します。それ以外の場合は、フレックスボックスが機能します。