Question

如何在中间和中间排列这个div，但不会丢失物体的比例并在手机上变形？

我尝试如下：

我的div：

  <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
            <h1>Você solicitou o download para o seguinte arquivo:</h1>
            <p class="lead">file.xxx</p>
            <ul class="list-unstyled">
                <li>Estamos protegendo a Hacchi Fansub contra bots e pessoas mal intencionadas, para continuar, basta resolver o simples captcha abaixo.</li>
            </ul>
            <form action="" method="post">
                <div class="g-recaptcha" data-sitekey="6LfMECUUAAAAABSGjGQjKQnaRMpUv5rt0MEUnGZ9"></div>
                <input type="submit" value="Clique aqui para continuar!" />
            </form>
        </div>
    </div>

我修改过的课程：

.row {
position: fixed;
left: 35%;
top: 45%;
text-align: center;        
margin-left: -273px; /*half width*/
margin-top: -132px; /*half height*/
width: auto;
}

在电脑的浏览器中它很完美：

Print 1.

但在手机浏览器中：

Print 2.

欢迎所有的帮助，谢谢你。

Answer 1

使用flexbox。在容器上应用以下CSS：

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

这将使该div中的内容垂直和水平居中。

删除已应用的所有其他样式以定位.row div。

Answer 2

您可以使用flex并获得相同的内容，即使内容是动态的。下面我发布了一个如何运作的例子。

我采用height 100vh获取完整视口高度，让孩子居中，您可以根据需要更改值。

.box {
 display:flex;
 flex-flow:row wrap;
 justify-content:center;
 align-items:center;
 width:100%;
 height:100vh;
 background:tomato;
 color:#fff;
}

<div class="box">
  TEXT
</div>

如何在中间 - 中间对齐但不丢失比例？

2 个答案: