html - 複数行のテキストをコンテナーの中央に揃えることができません

Question

私はcssが初めてなので、コンテナ（div）のテキストセンターを作成する方法がわかりません。

私のHTMLは

<div class="container">Some text goes over here.</div>

text-align: center、およびで試しましvertical-align: middleたが、うまくいきませんでした。

テキストを Div の中央に揃える方法はありますか。

Answer 1

と を使用してdisplay: table-cell、vertical-align: middleコンテナの中央にテキストを設定できます。

.divClass {
      width: 200px;
      height: 200px;
      border: 2px solid red;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
}

ここで動作を確認してください。http://jsfiddle.net/32rD7/

Answer 2

使用するText-Align:center;

 <div class="container" style="Text-Align:center;">Some text goes over here.</div>

Answer 3

さまざまな CSS ハックを適用したくない場合は、(実験的な)フレックスボックス レイアウトをご覧ください。

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

ベンダー プレフィックスを省略したことに注意してください。