Center form etc, leave in the center of the screen [duplicate]

Question

Center form etc, leave in the center of the screen [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'd like to know how to centralize anything in css, type, leave in the center of the screen. Can someone help me? I'm using HTML5.

html

asked by anonymous 23.08.2016 / 18:51

2 answers

Print table row "dataTable" How to edit files and compile them in Python + Django

score 0 · Answer 1

In the parent you use:

text-align: center;
position: absolute;
width:100%;

and the child (in this case the form):

display: inline-block;
position: relative;

Remembering that this only centralizes horizontally. and the child must be smaller in size than the parent.

score 0 · Answer 2

You can force the body to occupy the entire vertical visible area of the viewport:

min-height: 100vh;

In a parent DIV you also have it use the entire vertical area and relative positioning:

position: relative;
min-height: 100vh;

In form, you center the beginning of the same in the center of the screen and transfer 50% of its size to centralize it:

position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%)

Here is a complete example:

<style>
  body.center-form {
    min-height: 100vh;
  }

  div.center-form {
    position: relative;
    min-height: 100vh;
  }

  div.center-form > form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
</style>
<body class="center-form">
<div class="center-form">
  <form>
    <label for="nome">Seu Nome:</label>
    <input type="text" id="nome" name="nome">
  </form>
</div>
</body>
</html>