web-dev-qa-db-ja.com

中央にテキストがあるCSSフルスクリーンdiv

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

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

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

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

displayをtable-cell（テキストをセンタリングする一般的な方法）に設定して、Pエレメントを内部に追加しようとしましたが、運はありません。

助言がありますか？

htmlcsswebkit
30
Juan Alberto López Cavallotti

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

<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; 
}​
45
paislee

受け入れられた答えは機能しますが、次の場合：

  • コンテンツの寸法がわからない
  • コンテンツは動的です
  • あなたは将来の証拠になりたい

これを使って：

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

この優れた CSS-Tricksの記事 のコンテンツのセンタリングに関する詳細。

.center{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS Tricksのフレックスボックスに関するもう1つの優れたガイド。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

35
agconti

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

これを達成したい場合、2つのソリューションがあります。

  • テーブルを使用する（ugい、セマンティックではないが、テキストの1行ではないものを垂直方向に整列させる唯一の方法）
  • Window.resizeと絶対配置のリッスン

[〜＃〜] edit [〜＃〜]：解決策がないと言うとき、私は中央揃えするブロックのサイズが事前にわからないという仮説。あなたがそれを知っていれば、ペイズリーの解決策は非常に良いです

3
Samuel Rossille

text-align: centerは、水平方向に中央に配置し、垂直方向にスパンに配置し、margin:auto 0;（おそらく、スパンにdisplay: blockプロパティ）

0
Ryan