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

Html – Why won't my div center in the screen using css?

I have one small question about css. I want the content .add-task-container and .task-container to show up in the middle of the screen but for some reason it is not working. I’m sure I have something wrong with my css but I just can’t pinpoint which part. Would love it if someone can help me out and explain what needs fixing. Thank you!

body{
    background: url(/todolist/img/DSC05921-6.jpg) no-repeat center center/cover;
    margin:0;
}

.content-container{
    background: #FFFFFF;
    width:50%;
    margin:auto;
    text-align:center;
    justify-content: center;
}
<body>
    <div class="content-container">
        <div class="add-task-container">
            <input type="text" placeholder="Enter Task" id="input-task">
            <button id="add-task">ADD</button>
        </div>
        <div class="task-container">

        </div>
    </div>
    <script src=script.js></script>
</body>
Tags:

3

Answers


  1. 0

    If you want it centered horizontally and vertically, you could do this:

    .content-container {
    display: grid;
    min-height: 100vh;
    place-content: center;
}

    .content-container {
    display: grid;
    min-height: 100vh;
    place-content: center;
}
    <div class="content-container">
        <div class="add-task-container">
            <input type="text" placeholder="Enter Task" id="input-task">
            <button id="add-task">ADD</button>
        </div>
        <div class="task-container">

        </div>
    </div>
    Login or Signup to reply.
  2. 0

    In css

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

    Here,
    display: flex; will align the child divs in same row, then flex-direction: column; will make the child divs in a column, then justify-content: center; will make child divs in vertically center and align-items: center will make the inner divs in horizontally centre.

    if you remove the `flex-direction: column;` then `align-items: center` will make inner divs vertically center and `justify-content: center;` will make child divs horizontally center.

    Login or Signup to reply.
  3. 0

    .content-container {

    background: #FFFFFF;

width: 50%;

margin: auto;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

    }

    .add-task-container {

    margin-top: 20px;

    }

    .task-container {

    margin-top: 20px;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search