垂直和水平文本對齊使用引導

我要對齊的div中的文本在DIV-盒（水平和垂直）爲中間所有屏幕尺寸
我已經嘗試了像添加填充或使用轉換的常見解決方案; 但我沒有成功。
看看@的例子（我的文字是不是在盒子的中間垂直，其接近Div的頂部）

謝謝!!

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
.header_ueber_uns_text { 
 
    color: white; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    padding-left: 4%; 
 
} 
 

 
.header_ueber_uns_background_image { 
 
    padding-bottom: 30.1%; 
 
    height: 0; 
 
    background-image: url('http://placehold.it/1700x645'); 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.ueber_uns_image_box_1 { 
 
    padding-bottom: 38%; 
 
    height: 0; 
 
    background-image: url('http://placehold.it/800x600'); 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.ueber_uns_image_box_2 { 
 
    padding-bottom: 38%; 
 
    height: 0; 
 
    background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587'); 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.ueber_uns_text { 
 
    color: grey; 
 
    text-align: center; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-top: 50px; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 header_ueber_uns_background_image "> 
 
     <div class="header_ueber_uns_text"> 
 
     <h6>ÜBER UNS</h6> 
 
     <h3>KREATIVES DESIGN AUS BERLIN</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-xs-12 ueber_uns_image_box_1"> 
 
    </div> 
 
    <div class="col-sm-6 ueber_uns_image_box_2"> 
 
     <div class="ueber_uns_text"> 
 
     <img src="Images/werkzeug_moebel_freund_manufaktur-300x243.png" width="100px" alt=""> 
 
     <h6>ÜBER UNS</h6> 
 
     <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten 
 
      uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-xs-12 ueber_uns_image_box_2"> 
 
     <div class="ueber_uns_text"> 
 
     <h6>ÜBER UNS</h6> 
 
     <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten 
 
      uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 ueber_uns_image_box_1"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-19 PeterPilz

你想要居中哪個div？ –

我想用紫色背景將div的文字居中。謝謝 – PeterPilz

變化如下所述.ueber_uns_text類的CSS。它會顯示中心內的div的內容。

.ueber_uns_text { 
    color: grey; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

來源

2017-04-19 19:48:38

您可以使用Flexbox。您可以元素添加一個類.parent包含要中心什麼：

只有垂直：

.parent { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

水平和垂直方向：

.parent { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

來源： https://css-tricks.com/centering-css-complete-guide/

來源

2017-04-19 21:42:46

很酷的網站，隊友。謝謝你！ – PeterPilz

垂直和水平文本對齊使用引導

回答

相關問題