How to align a form element to the center of the page?

Question

I have got a login page and I want to align form element to the center of the page.

.signininp {
  border-radius: 20px;
  width: 20%;
  margin-top: 10px;
  padding: 5px;
}

<form>
  <input class="signininp" type="input" name="email">
  <br>
  <input class="signininp" type="input" name="pass">
  <br>
  <input class="signininp" type="submit" name="submit" value="Giriş Yap">
</form>

I can't do what I want with '' element. – Mer123haba456 Jul 19 '20 at 11:11 — Mer123haba456, Jul 19 '20 at 11:11
Forget about the center element, it's obsolete. – VXp Jul 19 '20 at 11:20 — VXp, Jul 19 '20 at 11:20

gavgrif · Accepted Answer · 2020-07-19T11:19:16.750

You can use flex to align to the center of the page - simply wrap the form in a div with display:flex and height:100vh - and then apply margin:auto to your form.

.form-wrapper {
  display: flex;
  height: 100vh;
}

form {
  margin: auto
}

<div class="form-wrapper">
  <form>
    <input class="signininp" type="input" name="email"/>
    <br>
    <input class="signininp" type="input" name="pass"/>
    <br>
    <input class="signininp" type="submit" name="submit" value="Giriş Yap">
  </form>
</div>

You could also use display: grid, height: 100vh and place-items:center on teh parent element - which effectively combines align-items: center and justify-content: center on the parent div.

.form-wrapper {
  display: grid;  
  height: 100vh;
  place-items: center;
}

<div class="form-wrapper">
  <form>
    <input class="signininp" type="input" name="email"/>
    <br>
    <input class="signininp" type="input" name="pass"/>
    <br>
    <input class="signininp" type="submit" name="submit" value="Giriş Yap">
  </form>
</div>

score 0 · Answer 2 · answered Jul 19 '20 at 11:20

0

Add the following css:

body {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
form{
    width: 20%;
}

answered Jul 19 '20 at 11:20

Ahron M. Galitzky

2,219
2
13
25

score 0 · Answer 3 · answered Jul 19 '20 at 11:22

0

Checkout to use the <center>tag, it resolves most of my html issues

 `   <center><form>
    <input class="signininp" type="input" name="email"/>
    <br>
    <input class="signininp" type="input" name="pass"/>
    <br>
    <input class="signininp" type="submit" name="submit" 
       value="Giriş Yap">
       </form></center>`

answered Jul 19 '20 at 11:22

avi

1
1

it's used in html 4 and it's previous versions . but not in html5 [check this](https://stackoverflow.com/questions/11478067/replacement-for-center) to know about the replacement of center tag – Giriteja Bille Jul 19 '20 at 11:25
@GiritejaBille Thanks, i dint knew it as i am new to programming , i am just 15 – avi Jul 21 '20 at 05:27

score -1 · Answer 4 · answered Jul 19 '20 at 11:12

-1

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

answered Jul 19 '20 at 11:12

talopl

188
1
9

1

I have tried a code like this but it didn't worked for me – Mer123haba456 Jul 19 '20 at 11:15
Hello! While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Brian61354270 Jul 19 '20 at 17:22

score -1 · Answer 5 · answered Jul 19 '20 at 11:18

-1

Put your form inside a div tag and

 div
{
  margin-left: 50%;
}

add this to your css file .

answered Jul 19 '20 at 11:18

Giriteja Bille

168
1
13

How to align a form element to the center of the page?

5 Answers5