divの中央にあるCSSテキスト（divの高さ：20％）

Question

<style> 
._1{ 
    height:20%; 
    width:100%; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
} 
</style> 
<div class="_1">content</div> 

divの中央にコンテンツを整列する方法は？ありがとう。 demo

編集：高さは％ではありません。私はline-height: 20%を設定しますが、動作しません。

Answer 1

div{ 
    height: 20%; 
    width: 100%; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: space-around; 
    align-content: center;  
    } 

Answer 2

代替選択肢：垂直方向に中央に配置された内側要素を使用します。 centerPositionクラス内のテキストをラップし、以下、そのクラスのためのCSSを使用しposition: relative;

に

• セット._1：これを行うには

  。

._1 { 
 
    position: relative; 
 
    height: 20%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    
 
    /* Just to make this example visible */ 
 
    border: 2px solid #555; 
 
} 
 

 
.centerPosition { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
/* Not needed, just making the page bigger */ 
 
.examplePage { 
 
    height: 300px; 
 
}

<div class="examplePage"> 
 
    <div class="_1"> 
 
    <div class="centerPosition">content</div> 
 
    </div> 
 
</div>

Answer 3

あなたはフレキシボックスを使用したくない場合は、CSS3が翻訳使用して試すことができます。 しかし、あなたは段落や他のいくつかのタグでテキストをラップする必要があり、これが動作するためにある：

._1 p{ 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    position: relative; 
    top: 50%; 
} 
<div class="_1"><p>content</p></div> 

、あなたが使用できるマークアップとテーブルセルでは、同様に技術を合わせます。

Answer 4

フレックスボックスのみのソリューションです。 Here browser support

._1{ 
 
    height:20%; 
 
    width:100%; 
 
    overflow:hidden; 
 
    white-space:nowrap; 
 
    text-overflow:ellipsis; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    
 
    border: 1px dashed deepskyblue; 
 
} 
 

 
html,body { 
 
\t height: 100%; 
 
}

<div class="_1">content</div>