div内で高さが可変のコンテンツを垂直方向の中央に配置するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/59309

  •  09-06-2019
  •  | 
  •  

質問

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

alt text

役に立ちましたか？

解決

追加するだけです

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

他のヒント

ブラウザがサポートしている限り、これがこの問題に対して私が見つけた最良の解決策のようです。 ::before 疑似要素: CSS のトリック:未知の世界を中心に.

追加のマークアップは必要なく、非常にうまく機能するようです。使えませんでした display: table 方法 table 要素は従わない max-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>

これは私が何度も行う必要があったことですが、一貫した解決策を得るには、セマンティックではないマークアップとブラウザー固有のハックを少し追加する必要があります。ブラウザで CSS 3 がサポートされると、問題なく垂直方向のセンタリングが可能になります。

このテクニックのより詳しい説明については、以下をご覧ください。 私がそれを改変した記事, ただし、基本的には、追加の要素を追加し、IE およびサポートされているブラウザーでさまざまなスタイルを適用する必要があります。 position:table\table-cell テーブル以外の要素について。

<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 に対するブラウザのサポートが改善され始めており、(他の効果の中でも特に) 垂直方向のセンタリングを取得するための代替方法としてフレックスボックスとトランスフォームの両方が導入されています。見る この他の質問 最新の方法について詳しくは、CSS3 に対するブラウザのサポートがまだ不完全であることに留意してください。

子セレクターを使用して、 ファディの驚くべき答え 上記を要約すると、適用できる CSS ルールは 1 つだけになります。あとは、 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>

フォークされたコードペン: http://codepen.io/dougli/pen/Eeysg

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

div を中央に配置します:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

マージンオートを使用できます。flex を使用すると、div も垂直方向に中央に配置されるように見えます。

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

これは私にとって素晴らしい解決策です div 動的（パーセンテージ）高さを使用します。

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>

これを自分で試してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top