Centralize form etc, leave in the center of the screen

Asked

Viewed 23,336 times

0

I’d like to know how to center anything on css, like, leave in the center of the screen. Can anyone help me? I’m using HTML5.

html
  • 2

    This question has already been answered here: http://answall.com/questions/806/comoroscentralizar-horizontalmente-uma-div-dentro-de-another

  • What do you want to center? a <div> <p> text?

  • I want to center a form, leave it in the center of the screen.

2 answers

0

in the father you use:

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

and in the child (in this case the form):

display: inline-block;
position: relative;

remembering that this only centralizes horizontally. and the child should be smaller than the father.

  • It didn’t work out, man.

0

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

min-height: 100vh;

In a parent DIV you also make her use the entire vertical area and relative positioning:

position: relative;
min-height: 100vh;

In the form, you center the start of the same in the center of the screen and move 50% of its size to center it:

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

The following 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>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.