（と）のdivセットがあり、中にテキストがあります。display:block90px heightwidth

テキストを垂直方向と水平方向の両方の中央に揃える必要があります。

試してみました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などの主要なブラウザでテストされています。

カスタマイズする必要がある場合の1つのテクニカルノート：フレックスアイテムの内部。このフレックスアイテムはフレックスコンテナー自体ではないため、CSSの古い非フレックスボックスの方法は期待どおりに機能します。ただし、現在のフレックスコンテナーにフレックスアイテムを追加すると、2つのフレックスアイテムが水平に配置されます。垂直に配置するには、flex-direction: column;をflexコンテナーに追加します。これは、フレックスコンテナーとその直接の子要素の間で機能する方法です。

センタリングを行う別の方法がありcenterます。フレックスコンテナーの主軸と交差軸での分布を指定せず、代わりmargin: autoにフレックスアイテムで4方向すべての余分なスペースと均等に分布されたマージンを占めるように指定します。フレックスアイテムを全方向の中央に配置します。これは、複数のflexアイテムがある場合を除いて機能します。また、この手法は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方法と方法が機能します。そうでなければ、フレックスボックスが仕事をします。

2014年現在の一般的な手法：

• アプローチ1- transform translateX/ translateY：

  ここの例 /全画面の例

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

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

• アプローチ2-フレックスボックス方式：

  ここの例 /全画面の例

  ではサポートされているブラウザ、設定display対象の要素へのflexおよび使用をalign-items: center垂直センタリング用とjustify-content: center水平センタリングのために。追加のブラウザーサポートのためにベンダープレフィックスを追加することを忘れないでください（例を参照）。

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

• アプローチ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;
  }
  

• アプローチ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;
  }
  

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

  ここの例

  場合によっては、親要素の高さが固定されます。垂直方向の中央揃えの場合、必要なことline-heightは、親要素の固定高さに等しい値を子要素に設定することだけです。

  このソリューションは場合によっては機能しますが、このように複数行のテキストがある場合は機能しないことに注意してください。

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

方法4と5は、最も信頼できる方法ではありません。最初の3つのうちの1つに進みます。

flexbox / CSSの使用：

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS：

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

クイックヒントからの引用：要素を垂直方向および水平方向に中央揃えする最も簡単な方法

display: table-cell;そのdivのCSSコンテンツに行を追加します。

テーブルセルのみvertical-align: middle;がをサポートしますが、その[テーブルセル]定義をdivに与えることができます...

ライブの例はここにあります：http : //jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

私は常に次のCSSをコンテナに使用して、コンテンツを水平方向と垂直方向の中央に配置します。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

ここでそれを実際に見てください：https : //jsfiddle.net/yp1gusn7/

このための非常に簡単なコードを試すことができます。

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Codepenリンク：http ://codepen.io/santoshkhalse/pen/xRmZwr

このCSSクラスをターゲットの<div>に渡します。

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

親でflexプロパティを使用して、子アイテムにプロパティを追加できます。 divmargin:auto

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

flexここのより多くのオプションを見ることができます：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

アプローチ1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

アプローチ2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

アプローチ3

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

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

これは私のために動作します（テストされたOK！）：

HTML：

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS：

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

50％以外の値を選択できます。たとえば、25％を親の25％の中央に配置します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

次の方法を試すことができます。

1. 単一の単語または1行の文がある場合は、次のコードで対処できます。

   divタグ内にテキストを入れ、IDを付けます。そのIDに次のプロパティを定義します。

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   注： line-heightプロパティが分割の高さと同じであることを確認してください。

   画像

   ただし、コンテンツが複数の単語または行である場合、これは機能しません。また、分割のサイズをpxまたは％で指定できない場合があります（分割が本当に小さく、コンテンツを正確に中央に配置したい場合）。

2. この問題を解決するために、以下のプロパティの組み合わせを試すことができます。

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   画像

   これらの3行のコードは、分割のちょうど真ん中にコンテンツを設定します（表示のサイズに関係なく）。「ALIGN-アイテム：センターは、」垂直センタリングするのに役立ちながら、「正当化-コンテンツ：センター」を、それは水平方向の中央を行います。

   注： Flexはすべてのブラウザーで機能するわけではありません。追加のブラウザーサポートのために、適切なベンダープレフィックスを必ず追加してください。

グリッド

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

行の高さを調整して垂直方向の配置を取得します。

line-height: 90px;

これが正解です。最もクリーンでシンプル：

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

スタイルを適用：

position: absolute;
top: 50%;
left: 0;
right: 0;

テキストは、長さに関係なく中央揃えになります。

これは私のために働きました：

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

私にとってこれは最良の解決策でした：

HTML：

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS：

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

私のために働く本当にシンプルなコード！1行だけで、テキストは水平方向の中央に配置されます。

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

出力は次のようになります。

簡単な解決策を探している開発者の時間を節約するためだけに機能する場合は、この回答に投票してください。ありがとう！:)

次の例を試してください。各カテゴリの例を追加しました：水平および垂直

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>