web-dev-qa-db-ja.com

動的に高さのdivでテキストを垂直方向に中央揃えするにはどうすればよいですか？

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

Div要素の高さに関係なく、divタグ内でh1タグを垂直方向に中央揃えするにはどうすればよいですか？つまり、ユーザーがブラウザの高さを変更した場合、新しい高さに応じてh1を中央に垂直に配置する必要があります。

ありがとう。

htmlcsscentering
36
Albion

私がこれまでに遭遇した最良の解決策は、displayプロパティを利用し、tableとしてラッパー要素を設定して、vertical-align:middle中央に配置する要素：

こちらをご覧くださいworking Fiddle Example ！

[〜＃〜] html [〜＃〜]

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

[〜＃〜] css [〜＃〜]

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

テスト済み

Windows XP 2002年Service Pack 3のProfissionalバージョン

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151（開発者ビルド130497 Linux）
61
Zuul

目立たず、混乱が少ないと思う答えは、<span>タグの前に<h1>要素： http://jsfiddle.net/Wexcode/axRxE/

HTML：

<div>
    <span></span><h1>Text</h1>
</div>​

CSS：

div { text-align: center; /* horizontally center */ }
div span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
div h1 {
    vertical-align: middle;
    display: inline-block; }​

この手法を拡張して、ブラウザーの高さに垂直に揃えます： http://jsfiddle.net/Wexcode/axRxE/1/

17
Wex

http://jsfiddle.net/xQBbQ/

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
    </div>
</body>
4
Zoltan Toth

私はあなたの心を吹き飛ばそうとしているCSSの最も簡単な3行を持っています、そしてあなたは「なぜ私はこれを最初に考えなかった」と思うでしょう。垂直方向の中央に配置する要素でこれを使用し、親コンテナーは高さを100％だけ追加します。

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

位置は、相対、絶対、または固定のいずれかです。

4
Tom McDonough
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #0c0c0c;
}
.object {
    background-color: #666666;
    height: 350px;
    width: 600px;
}
.verticalCenter {
    width:600px;
    height:350px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
    <div class="verticalCenter">
        <div class="object">cetnered</div>
    </div>
</body>
</html>

.verticalCenterクラスの高さと幅は、中央に配置するオブジェクト（div、flash、image、text）と同じに設定する必要があります。そして、マージンはこれらの高さと幅の半分でなければなりません。

そのオブジェクトを動的に変更する場合、解決策はないと思います。おそらく、javascriptを使用する場合を除きます。

1
heroix

これはかなり簡単なソリューションです。それは主にdisplay:table-cellの設定と中央のような垂直方向の配置の選択に基づいています。

HTML：

<div id="vertical">
    <p>this text is vertically centered.  It's long enough to wrap, and should work for any size chunk of content.</p>
    <p>Heck, it even works with multiple items in the middle.</p>
</div>​​

CSS：

#vertical {
    display:table-cell;
    vertical-align:middle;
    height: 500px;
    width: 300px;
}​

JSFiddle： http://jsfiddle.net/6Re3E/1/

1
Surreal Dreams

私はすべてにテーブルを使用しています。私は個人的にusingdisplay: tableまたはそのような何かが既に存在する場合。

<table style="width: 100%; height: 100%;">
    <tr>
        <td>
            <!-- Whatever you want vertically and horizontally centered -->
        </td>
    </tr>
</table>

これと同じ方法を使用して、あなたのケースで次のようなことができます：

<div id="container-div" style="position: relative">
    <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
    <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td>
                    <!-- Whatever you want vertically and horizontally centered -->
                </td>
            </tr>
         </table>
     </div>
</div>
0
Superjova