Question

我有以下问题：

我想在Div-Box中间对齐Div内部的文本（水平和垂直）适用于所有屏幕尺寸
我已经尝试过常见的解决方案，例如添加填充或使用转换; 但是我没有让它发挥作用。
看@示例（我的文字不在垂直方框的中间，它的接近Div的顶部）

谢谢！

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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%);
}

垂直和水平文本使用Bootstrap在Div内部对齐

2 个答案: