垂直和水平文本使用Bootstrap在Div內部對齊

Question

我有以下問題：

• 我希望在Div-Box中間（水平和垂直）對齊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> 

Answer 1

您可以使用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/

有關flexbox的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 2

更改.ueber_uns_text類的css，如下所述。 它將在中心顯示div的內容。

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