0

Hi i'm unable to centre the div can anybody help me with it and inform me what i'm doing wrong.

I have created a div with class = main-container and inside it i have another div with class = form-container.

after using the flex-box the container on the main-container the form-container is not getting in the centre of the page.

.main-conatiner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.form-container {
    padding: 50px;
    max-width: 500px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
label {
    display: block;
    margin-bottom: 5px;
    margin-left: 10px;
    font-size: 1.3rem;
}

input {
    display: block;
    margin: 10px;
    width: 100%;
    height: 30px;
    border-color: black;
    font-size: .8rem;
    padding: 6px 4px;
    border-radius: 3px;
}
<body>
    <div class="main-container">
        <div class="form-container">
            <form action="">
                <label for="name">
                    Name:
                </label>
                <input type="text" name="name" placeholder="Enter your name">
                
                <label for="email">
                    Email:
                </label>
                <input type="text" name="email" placeholder="Enter your email">
                
                <label for="phone">
                    Phone:
                </label>
                <input type="number" name="phone" placeholder="Enter your phone number">
                
                <label for="address">
                    Address:
                </label>
                <input type="text" name="address" placeholder="Enter your name">
    
            </form>
        </div>
    </div>
</body>
Ethan
  • 881
  • 8
  • 14
  • 26
shudhanshu Choudhary
  • 11
  • 1
  • 3

2 Answers2

1

You could try adding margin: auto to your form container like so

  .form-container {
    margin: auto;
    padding: 50px;
    max-width: 500px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

here is a codepen with this example with a centered form container

muriukialex
  • 73
  • 1
  • 7
0

problem is just a typo in your css classname .main-conatiner. you wrote conatiner. but correct is container.

saeid Ghorbani
  • 11
  • 4