42

CSS クラスが定義されているので、すべてのブラウザーのビューポートを使用する div を作成できます。ルールは次のとおりです。

.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

今、div内のテキストを画面の正確な中央に配置したいので、垂直方向に中央に配置し、水平方向に中央に配置しますが、適切な方法が見つからないようです。

Webkit ベースのブラウザーでのみ動作する必要があります。

私はすでに P 要素をdisplayset to table-cell(テキストを中央に配置する一般的な方法) に追加しようとしましたが、うまくいきませんでした。

助言がありますか？

4

4 に答える 4

55

標準的なアプローチは、中央の要素に固定寸法を与え、絶対に配置することです。

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​
于 2012-05-22T17:53:11.677 に答える
3

この古典的な問題に対する純粋なCSSソリューションはありません。

これを実現したい場合は、2つの解決策があります。

  • テーブルの使用（醜い、意味論的ではありませんが、1行のテキストではないものを垂直方向に整列させる唯一の方法）
  • window.resizeと絶対位置を聞いています

編集：私が解決策がないと言うとき、私はあなたが中央にブロックのサイズを前もって知らないという仮説を立てます。あなたがそれを知っているなら、ペイズリーの解決策はとても良いです

于 2012-05-22T17:54:16.460 に答える
1

text-align: center垂直方向にスパンに配置するように水平方向に中央に配置し、css を指定しmargin:auto 0;ます (おそらく、スパンにdisplay: blockプロパティを指定する必要もあります) 。

于 2012-05-22T17:51:53.710 に答える