Question 180690 in Html Question posted in
Some basic documentation can be found here.

Html – i want to inputs be in the center of div

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>
Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    with thees changes it fixes , but How ??? , can someone explain ?

    form#id {    
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 30px;
margin-top: 5px;
**top: 33%;
position: sticky;**
}

  2. 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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 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.

    Login or Signup to reply.
  5. 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;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search