Vertical and Horizontal Text Align inside an Div using Bootstrap

Question

I have the following problem:

• I want to align the text inside of the Div in the middle of the Div-Box (horizontally and vertically) for all screen sizes
• I already tried the common solutions like adding padding or using transform; but I didn't make it work.
• look @ the example (my text is not in the middle of the box vertically, its close to the top of the Div)

Thank you!!

 @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

You can use Flexbox. You can add a class .parent on element containing what you want to center :

only vertically :

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

Both Horizontally and Vertically :

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

source : https://css-tricks.com/centering-css-complete-guide/

more info on flexbox :

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

Answer 2

Change the css of .ueber_uns_text class as mentioned below. It will show the content of div in the center.

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