167

コンテンツの高さが可変である場合に、divのコンテンツを垂直方向に中央に配置するための最良の方法は何ですか。私の特定のケースでは、コンテナーdivの高さは固定されていますが、コンテナーの高さが可変である場合にも機能するソリューションがあれば素晴らしいと思います。また、CSSハックや非セマンティックマークアップをまったく、またはほとんど使用しないソリューションが欲しいです。

代替テキスト

4

9 に答える 9

170

追加するだけ

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

内側のdivに。

内側の div の上端を外側の div の半分の高さに移動し ( top: 50%;)、内側の div をその高さの半分だけ上に移動します ( transform: translateY(-50%))。これはposition: absoluteまたはで動作しrelativeます。

簡単にするために含まれていないベンダープレフィックスがあることに注意transformしてください。translate

コードペン: http://codepen.io/anon/pen/ZYprdb

于 2014-12-27T00:15:48.383 に答える
159

::beforeこれは、ブラウザーが疑似要素CSS-Tricks: Centering in the Unknown をサポートしている限り、この問題に対して私が見つけた最良の解決策のようです。

追加のマークアップは必要なく、非常にうまく機能するようです。要素がプロパティに従わないdisplay: tableため、メソッドを使用できませんでした。tablemax-height

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}
<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

于 2012-10-25T19:35:36.820 に答える
16

これは私が何度もやらなければならなかったことですが、一貫した解決策を得るには、セマンティックでないマークアップを少し追加し、ブラウザー固有のハックをいくつか追加する必要があります。css 3 のブラウザー サポートを取得すると、罪を犯さずに垂直方向のセンタリングを取得できます。

テクニックのより良い説明については、私がそれを適応させた記事を見ることができますが、基本的には、余分な要素を追加し、position:table\table-cellテーブル以外の要素をサポートする IE とブラウザーにさまざまなスタイルを適用する必要があります。

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

特定のブラウザー セットにスタイルを適用する方法 (ハック) は多数あります。条件付きコメントを使用しましたが、上記のリンク先の記事を見て、他の 2 つの手法を確認してください。

注: 事前に高さがわかっている場合、1 行のテキストを中央に配置しようとしている場合、またはその他のいくつかの場合に、垂直方向の中央揃えを取得する簡単な方法があります。詳細がある場合は、ブラウザのハックや非セマンティック マークアップを必要としない方法がある可能性があるため、それらを投入してください。

更新: CSS3 に対するより良いブラウザー サポートを取得し始めており、(他の効果の中でも特に) 垂直方向のセンタリングを取得するための代替方法として、フレックス ボックスと変換の両方を提供しています。最新の方法の詳細については、この他の質問を参照してください。

于 2008-09-12T15:34:31.743 に答える
10

子セレクターを使用して、上記の Fadi の信じられないほどの回答を取り上げ、適用できる 1 つの CSS ルールにまとめました。contentCenteredあとは、中央に配置する要素にクラス名を追加するだけです。

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}
<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

フォークされた CodePen: http://codepen.io/dougli/pen/Eeysg

于 2013-12-06T21:48:17.417 に答える
4

これまでのところ、私にとって最高の結果：

中央に配置する div:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;
于 2016-11-21T04:30:37.203 に答える