如何在媒体查询中重置居中答案

【问题标题】：how to reset centering in media query如何在媒体查询中重置居中
【发布时间】：2018-09-04 04:34:45
【问题描述】：

我有两个 div 包裹在另一个 div (id="about") 周围。使用全尺寸浏览器，它显示为水平和垂直居中，这是我想要的。但是，当窗口的大小调整为较小时，我希望两个 div 彼此堆叠而不是并排。

对于我的尝试，我想基本上重置那个包装器（关于）。我的 CSS：

#icon{
    border: solid;
    border-color: red;
    border-width: 2px;

    max-width: 200px;
}
#about{
    min-height: 100%;
    min-height: 100vh;  

    <!-- These two lines horizontally and vertically centers about -->
    <!-- If removed, its responsive and stacks up the way that I want,
         BUT it no longer is centered vertically and sits on top of the page -->
    display: flex;
    align-items: center;
}
#aboutInfo{
    border: solid;
    border-color: red;
    border-width: 2px;  
    padding: 0;
}
@media (max-width: 768px){      
    #icon {
        max-width: 100px;
    }
    <!-- ATTEMPT TO RESET -->
    #about {
        float: none;
        width: 100%;
    }       
}

如何重置居中，以便在调整窗口大小时它会叠加，但在较大的浏览器中仍然居中。这是我的 HTML：

<div class="container text-center">
    <div class="row">
        <div id="about">

        <div class="col-sm-4 padding-0">
            <img src="img/html5.png" id="icon">
        </div>


        <div class="col-sm-6 padding-0">
            <div id="aboutInfo">
                <h1>Lorem Ipsum.</h1>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
                  Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. 
                  Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. 
                  Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. 
                  In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor 
                  maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien 
                  a ex porta dictum.
                </p>
            </div>
        </div>

        </div> <!-- end of about -->
    </div> <-- end of row -->
</div>

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

你可以这样做：

body {margin: 0}

#icon {
  border: 2px solid red;
  max-width: 200px;
}

#about {
  min-height: 100%;
  min-height: 100vh;  
  display: flex;
  align-items: center;
  justify-content: center; /* added */
}

#aboutInfo {
  border: 2px solid red; 
}

@media (max-width: 768px) {      
  #icon {max-width: 100px}
  #about {flex-direction: column} /* added */
}

<div class="container text-center">
  <div class="row">
    <div id="about">
      <div class="col-sm-4 padding-0">
        <img id="icon" src="https://placehold.it/200x150" alt="">
      </div>
      <div class="col-sm-6 padding-0">
        <div id="aboutInfo">
          <h1>Lorem Ipsum.</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
            Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. 
            Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. 
            Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. 
            In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor 
            maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien 
            a ex porta dictum.
          </p>
        </div>
      </div>
    </div> <!-- end of about -->
  </div> <!-- end of row -->
</div>

默认情况下 flex-container 或 parent 堆叠 flex-items 或 children 行，但你可以通过将flex-direction 属性设置为column 的值轻松更改。

【讨论】：