Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am wanting to center a div inside another div but not have the items inside the sub-div to be centered. Below is the code that I have. I am wanting the sub-div to be centered on the page but not have all the div-test divs to be centered either. When I apply flexbox and justfify-content: center or align-items center on the main-div it is not doing anything to the sub-div. How might I center the sub-div inside the main-div and keep all the items not centering also.

HTML
<div class="main-div">
    <div class="sub-div">
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
        <div class="div-test">
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
            <span>aldsflasdj</span>
        </div>
    </div>
</div>
CSS
.div-test {
    background-color:yellow;border:1px solid gray;
}

.sub-div {
    display: inline-flex;
    flex-wrap: wrap;
}


What I have tried:

I have tried using flexbox with just-content: center and align-items:center on the main-div but it is not doing anything.
Posted
Updated 6-Jan-22 4:45am
v2

1 solution

In order to centre something on the page, it has to take up less than the full width of the page. Your main-div currently has no constraint on its width, and therefore takes up the full width of the page.

Once you've added a width constraint, you can use margin:0 auto; to horizontally centre the div on the page:
CSS
.main-div {
    max-width: 50%;
    margin: 0 auto;
}
Demo[^]

If you want it vertically centred as well, then you'll need to make it take up the full height of the viewport and use flex-direction:column:
CSS
.main-div {
    max-width: 50%;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html, body {
    margin: 0;
    padding: 0;
}
Demo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900