-1

how can I lining up this div in the middle and center but without losing the proportion of the objects and gets deformed on the cellphone?

I tried as follows:

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

My modified class:

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

In the computer's browser it was perfect:

Print 1.

But in the mobile phone navigator:

Print 2.

All the help is welcome, thank you now.

Bebeto Alves
  • 105
  • 5
  • 1
    Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – Rob Jun 12 '17 at 15:03

2 Answers2

0

Use flexbox. On the container apply the following CSS:

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

This will center the content within this div both vertically and horizontally.

Remove all the other styles you have applied to position the .row div.

Neil K
  • 1,318
  • 1
  • 14
  • 23
0

you can use flex and get the same, even the content comes dynamically. below i posted just an example to how it works.

i take height 100vh to take full viewport height to get the child in center you can change the value as your need.

.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>
LKG
  • 4,152
  • 1
  • 11
  • 21