仅在移动设备上的垂直和水平中心答案

【问题标题】：vertical and horizontal center on mobile only仅在移动设备上的垂直和水平中心
【发布时间】：2019-06-09 04:57:00
【问题描述】：

我希望仅在我的部分具有固定高度的移动设备中将一列居中。

<div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

任何想法如何实现这一目标？

【问题讨论】：

标签： twitter-bootstrap css bootstrap-4 center

【解决方案1】：

您想探索 FlexBox 吗？水平或垂直居中项目非常方便。您希望将代码包含在父 div 中并设置

display:flex; 
align-items: center; //For horizontal centering
justify-content: center; //For vertical align

类似这样的：https://jsfiddle.net/jvknog1d/

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

<div class="parent">
  <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; ">
    <div class="container">
      <div class="row h-100">
        <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
        <div class="col-12 my-auto col-md-7">
          <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>

【讨论】：

【解决方案2】：

您应该在 CSS 中使用“@media only screen”来更改不同分辨率的设置。

.mysection{
background-image: url("https://via.placeholder.com/728x462.png?text=placeholder"); 
background-position: right bottom; 
background-size: cover; 
height: 462px;
}





@media only screen and (max-width: 600px) {
  .mysection {
    text-align : center;
  }
}

<div class="mysection">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" ><img class="img-fluid mx-auto d-block" style="border: 1px solid;" src="https://via.placeholder.com/200x200.png?text=image"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

更多信息，您可以查看link。

【讨论】：