i want to inputs be in the center of div

Question

content is not placed in the Center of Div

i tried to make of form in the center of a div , t think all of values are correct but form doesn't get center this is the code the form goes in div of content but form stick to up of div , i don't know why

form#id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

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

.square {
  position: relative;
  width: 80vmin;
  border: solid white 5px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  align-items: center;
  justify-content: center;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 29px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="square">
    <div class="content">
      <form id="id">
        <label for="input1">write ID</label>
        <input type="number" name="input1" id="input1" placeholder="id">
      </form>
    </div>
  </div>
</div>

Does this answer your question? [How can I horizontally center an element?](https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element) — emerson.marini, Jun 02 '23 at 10:01
And many more: https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically — emerson.marini, Jun 02 '23 at 10:02
I can't replicate your problem using local IDE and StackSnippet. That being said, this should be closed either as a duplicate, or non-reproducible. — InSync, Jun 02 '23 at 10:29

justaklboy · Answer 1 · 2023-06-02T10:22:12.780

0

Your pseudo class under .square:after is pushing it to the top as it's padding bottom is at 100%. Try commenting the whole block out and you will see the whole form in the middle.

sidenote: You can use justify-content: center; as its faster.

edited Jun 02 '23 at 10:22

answered Jun 02 '23 at 10:12

justaklboy

1
3

i have wrote - justify-content: center; - for every tag i have , doesn't work or It is in conflict with a unknown part – Mostafa Kamali Jun 02 '23 at 10:56

score 0 · Answer 2 · answered Jun 02 '23 at 10:33

0

I am also beginner, but I think this will help.

try with this once

 #id {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 30px;
padding-top: 50%;
}

padding-top:50% will bring your form to the center of the square.

answered Jun 02 '23 at 10:33

Sahana Dattatreya Hegde

11
2

1

no doesn't work , because want to be responsive and be center of div for every screen , if this %50 was related to div was OK but its related to screen , therefor position for different screen may messed up ... – Mostafa Kamali Jun 02 '23 at 10:45

score 0 · Answer 3 · answered Jun 02 '23 at 11:44

0

Add display:flex inside of .content class

   .content {
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      border-radius: 29px;
    }

answered Jun 02 '23 at 11:44

Jemba Narcisse

1
1

Deadpool · Answer 4 · 2023-06-02T10:20:34.727

Does this help?

Also, see: https://blog.hubspot.com/website/center-div-css

.container {
    background: yellow;
    padding:20px;
  }
  
.square {
    position: relative;
    width: 80vmin;
    border: solid white 5px;
    justify-content: center;
    border-radius: 30px;
    margin:auto;
  }
  
.content {
    position: absolute;
    align-items: center;
    justify-content: center;
    height:100%;
    display:flex;
    text-align:center;
  }
  
form#id {
}
  
.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    align-items: center;
    justify-content: center;    
  }

<body>
    <div class="container">
        <div class="square">
            <div class="content">
                <form id="id">
                    <label for="input1">Write-ID</label>
                    <input type="number" name="input1" id="input1" placeholder="id">
                </form>
          </div>
        </div>    
    </div>
</body>

its good example of what i want but if you check it on different screen or bigger screen you can see that aint center in all screens , if i fix it an center it horizontally that would be the exact thing that i want — Mostafa Kamali, Jun 02 '23 at 11:01

i want to inputs be in the center of div

4 Answers4