使 div 响应 div 中心的 div 内容答案

【问题标题】：make divs responsive with div content at centre of div使 div 响应 div 中心的 div 内容
【发布时间】：2018-12-25 20:52:56
【问题描述】：

您好，我是 bootstrap 新手，我正在尝试在大屏幕上实现此效果但 div-2 中的文本位于 div 的垂直中心。

我正在尝试将 Lorem ipsum 文本放在此图像中 div-2 的中心

但是如果我从顶部添加一个填充，文本会在大屏幕上居中，但是当我将屏幕尺寸缩小到中小型屏幕时，我仍然有这个不必要的顶部填充，所以我得到了这个布局。

此图像中 div-2 顶部的不必要填充

我想要的只是 div-2 中的文本在 lg 设备上位于垂直中心，在 sm 和 md 设备上位于 img 下方，没有顶部的填充。对不起，如果我不清楚，您的帮助将不胜感激。

【问题讨论】：

展示你的努力..!!
我已经发布了一个问题，它只是意味着我已经完成了尝试并需要一些帮助:)
你没有发布任何代码
我没想到会有代码作为答案，只是想知道如何使用引导类来获得所需的输出，顺便说一句。

标签： html css

【解决方案1】：

.div-2{
position:relative;
width:300px;
height:300px;
border:3px solid;
}
.contant{
position:absolute;
transform: translateY(-50%);
right: 0;
left: 0;
top:50%;
text-align:center;
}

<div class="div-2">
<span class="contant">
LOREM IPSUM
LOREM IPSUM
</span>
</div>

【讨论】：

谢谢！它救了我的命！

【解决方案2】：

这是我的解决方案

全屏打开sn-p并检查

添加d-flex align-items-lg-center align-items-sm-top 将在大屏幕上垂直居中对齐文本，并在小屏幕上将文本顶部对齐。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-lg-6,.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.image{
  height:100px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-lg-6 col-sm-12 image   text-center text-lg-left">
      Image
    </div>
    <div class=" col-lg-6 col-sm-12 justify-content-center d-flex align-items-lg-center align-items-sm-top">

      lorem ipsum

    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

更新

添加text-center text-lg-left 以在中小型设备上居中图像，但仅在大型设备上左对齐

【讨论】：

@maheshmnj，如果这个回答对你有帮助，请采纳
哦，是的！当然:)
您好，该解决方案有效，但图像始终固定在左侧，除非我添加一些填充或边距，如何使图像在小型和 md 设备上浮动在中心。