1 行のテキストや画像であれば、簡単に実行できます。以下を使用するだけです。

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

以上です。複数行になる場合は、少し複雑になります。しかし、解決策はあります。翻訳：「垂直方向の配置」を探します。

これらはハックや複雑な div の追加になる傾向があるため、通常は 1 つのセルを持つテーブルを使用してこれを実行し、できるだけシンプルにします。

2020 年の更新:

Internet Explorer 10などの以前のブラウザで動作させる必要がない限り、flexboxを使用できます。現在主要なブラウザすべてで広くサポートされています基本的に、コンテナはフレックス コンテナとして指定する必要があり、主軸と交差軸に沿って中央に配置する必要があります。

#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;の間では、このように機能します。

中央揃えを行う別の方法があります。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 のサポートが必要な場合、flexbox は機能せず、上記の方法とline-height方法が機能します。それ以外の場合は、flexbox で十分です。