親の高さが指定されていないときのテキストの中心の位置合わせ

Question

高さの固定されたコンテナでは、単にline-heightプロパティを高さに合わせるだけです。 コンテナの高さが指定されていないときはどうしますか？

Answer 1

いくつかの方法があります。ここではテーブルアプローチです。もう一つの方法は、親コンテナを相対的にし、pタグをtop：50％;で絶対にすることです。 ie8以下をサポートしていない場合は、flexboxを使用できます。ここでフレキシボックスを学ぶための素晴らしいリソースです：http://flexboxfroggy.com/

.container{ 
 
    width: 300px; 
 
    height: 400px; 
 
} 
 

 
.content{ 
 
    width: 100%; 
 
    height: 70%; 
 
    display: table; 
 
} 
 

 
p{ 
 
    display: block; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <p> 
 
    Center text 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

#services .txt { 
 
    height: 500px; 
 
    border: 1px #000 solid; 
 
    display:table; 
 
    text-align:center; 
 
} 
 
.sub{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
}

<div id="services"> 
 
     <div class="txt"> 
 
      <div class="sub"> 
 
        <h1>Lorem Ipsum</h1> 
 
        <p> Lorem Ipsum is simply dummy text of the       printing and typesetting industry. Lorem       Ipsum has been the industry's standard       dummy text ever since the 1500s.. 
 
        </p> 
 
      </div> 
 
     </div> 
 
</div> 
 

今のdiv .txtの高さを変更してみてください、あなたはそれが垂直配向の中心テキストです表示されます。

この方法はメイプルードブに依存しますディスプレイ：table;
サブディブdisplay：table-cell;およびvertical-align：middle;

Answer 3

.support-box { 
     width: 50%; 
     float: left; 
     display: block; 
     height: 20rem; /* is support box height you can change as per your requirement*/ 
     background-color:#000; 
    } 
    .wrapper { 
     width: 50%; 
     display: block; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
     background:#ddd; 
     margin:auto; 
     height:100px; /* here the height values are automatic you can leave this if you can*/ 

    } 
    .text { 
     width: 100%; 
     display: block; 
     padding:10px; 
     margin:auto; 
    } 


    <div class="support-box"> 
    <div class="wrapper"> 
    <div class="text">USE OUR DESIGNS</div> 
    </div> 
    </div> 

Js fiddle:// https://jsfiddle.net/vh4y426f/5/