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

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

ありがとう。

4

10 に答える 10

69

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

この 実用的なフィドルの例を参照してください!

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 Professional バージョン 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • オペラ 11.62
  • Firefox 3.6.16
  • サファリ5.1.2
  • Google Chrome 18.0.1025.168m

Windows 7 ホーム エディション サービス パック 1

  • Internet Explorer 9.0.8112.164211C
  • オペラ 11.62
  • Firefox 12.0
  • サファリ5.1.4
  • Google Chrome 18.0.1025.168m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (開発者ビルド 130497 Linux)
于 2012-06-07T20:36:54.903 に答える
19

邪魔にならず、混乱も少ないと思う答えは、要素<span>の前にタグを挿入することです: http://jsfiddle.net/Wexcode/axRxE/<h1>

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/

于 2012-06-07T21:44:03.507 に答える
4

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>
于 2012-06-07T20:25:26.400 に答える
2

CSS2 + CSS3を使用し、Javascriptを使用せずにこれを行うためのクロス（デスクトップ）ブラウザソリューションがあります。

で動作します

  • IE5 +
  • Gecko（Mozilla、Firefox、Netscape 7）
  • Opera 7+
  • Konqueror 3+
  • Webkitブラウザ（Safari、Google Chrome）
  • その他多数（モバイルブラウザはテストされていません）

ドキュメント：高さが不明なCSSの決定的なソリューションでの垂直方向のセンタリング：
http ：

//www.jakpsatweb.cz/css/css-vertical-center-solution.htmlクリーンなjsFiddleの例：http：//jsfiddle.net/WYgsP/

HTML

<div class="outerBox">
    <div class="helper">
        <div class="boxWithUnknownHeight">
            any text<br>
            any height<br>
            any content, for example generated from DB<br>
            everything is vertically centered
        </div>
    </div>
</div>​

CSS

.outerBox {
    display: table;
    height: 400px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

.helper {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

.boxWithUnknownHeight {
    #position: relative; /* ie hack */
    #top: -50%;
    border: 1px solid green
}​

Firebugなどでテキストや改行を追加しても機能します。無効なCSSハックからCSSをクリーンに保つために、条件付きコメントを使用して、ブラウザー固有のコードで別のCSSを作成すること
をお勧めします。

高さが不明な垂直方向のセンタリングが正確に機能する方法とその理由：詳細な説明

display: tableandまたはdisplay: table-cellandまたは絶対ポジショニングを使用する他のソリューションはここにあります。

于 2012-06-07T21:11:35.783 に答える
1

これはかなり簡単な解決策です。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/

于 2012-06-07T20:33:19.043 に答える
1 
<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>

中央に配置するオブジェクト (div、flash、image、text) と同じ高さと幅を .verticalCenter クラスに設定する必要があります。また、余白はこれらの高さと幅の半分でなければなりません。

そのオブジェクトを動的に変更しても解決策はないと思います。おそらくjavascriptを使用しない限り。

于 2012-06-07T20:30:27.973 に答える
0

私はすべてにテーブルを使用しています。display: 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>
于 2014-02-05T20:53:23.957 に答える
-2

私の観点からするとdiv、この場合は適切な選択ではありません。私の提案は、それtableをvertical-alignスタイルすることtdです。

于 2012-06-07T20:26:03.847 に答える