垂直和水平文本使用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%);
}