Center Form In Middle of Screen

Question

I found this example of a cool effect to center form in middle of screen but for some reason my form appears on the top left of the center box. Anyone know how to get the form to be centered?

CSS is as follows:

html {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height:100%;
    margin: 0;
    padding: 0;
    background:#eeeeee;
}

body {
    margin: 0;
    flex: 0 1 auto;
    align-self: auto;
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 600px;
    background:#fafafa;
    -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
}

I wrapped my form in <body> tag

score 2 · Accepted Answer · answered Sep 03 '18 at 04:11

2

Did you try to do like this?

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

<div class="container">
  <div class="Centerdive">
  My Div
  </div>
</div>

answered Sep 03 '18 at 04:11

Udara Kasun

2,182
18
25

Hassan Sadeghi · Answer 2 · 2018-09-03T06:18:36.227

-1

You can try this:

HTML:

<body>
    <div class="must-center"></div>
</body>

css:

body{
    position: absolute;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.must-center{
    position:absolute;
    left:0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f90;
    width: 100px;
    height: 100px;
}

Try it online

edited Sep 03 '18 at 06:18

answered Sep 03 '18 at 04:32

Hassan Sadeghi

1,316
2
8
14

I've updated my answer (fiddle link is added too) :) – Hassan Sadeghi Sep 03 '18 at 07:39
why downvote?? it works fine. – Hassan Sadeghi Sep 03 '18 at 08:15

score -1 · Answer 3 · answered Sep 03 '18 at 05:30

You can make it center of the screen very easily by using margin: 0 auto; and set a width of the form tag. You can try the code below

form {
  width: 100%;
  max-width: 300px;
  margin: 50px auto;
  background:#fafafa;
  -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  min-height: 200px;
  padding: 40px;
}

form input {
  width: 100%;
  height: 28px;
  margin-bottom: 15px;
  padding: 5px;
}

<form>
  <h2>Form Center:</h2>
   <input type="text" placeholder="Test input">
   <input type="text" placeholder="Test input 2">
</form>

Center Form In Middle of Screen

3 Answers3