How can i center several <div> in middle of page that are in another <div>?-CodePudding

I tried to use several ways for example with transform translate -50% and top and left 50% child display absolute and parent alternative but it didn't work.

.flex-container {
    display: flex;
    gap: 1rem;
    position: relative;
}
.widget img{
    width: 4rem;
}
.widget p img {
    width: 1.25rem;
    margin-right: 5px;
}
.widget a img {
    width: 1rem;
}
.widget {
    width: 100%; background-color: rgb(242, 242, 242);
    padding: 25px; border-radius: 1rem; 
        
}
.widget button {
    padding: 8px 24px;
    border: solid 1px black;
}
.widget button img {
    width: 1.25rem;
    vertical-align: middle;
}

<body>
    <div >
        <div ><img src="/src/invest-svgrepo-com.svg" alt=""><br>
            <h2>$4,500</h2><br>
            <p>Earned this month</p><br>
            <p><img src="/src/up-arrow-svgrepo-com.svg" alt=""> 6.5% more than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
        <div ><img src="/src/rocket-svgrepo-com.svg" alt=""><br>
            <h2>25</h2><br>
            <p>New Sales</p><br>
            <p><img src="/src/up-arrow-svgrepo-com.svg" alt=""> 16.22% more than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
        <div ><img src="/src/meeting-svgrepo-com.svg" alt=""><br>
            <h2>7</h2><br>
            <p>New Members</p><br>
            <p><img src="/src/diagonal-arrow-svgrepo-com.svg" alt="">-19% than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
    </div>
    
    
</body>

CodePudding user response：

There are different methods

I start by using body{margin: 0 auto;}

If that doesn't work, you can always experient with justify-content: center; or align-content: center;

CodePudding user response：

You can simply add width and height in class .flex-container. According to what you need to centering the element based on display, you can use the vw or virtual-width and vh or virtual-height to set the width and height. Then add some flex attribute to centering it.

 .flex-container {
    display: flex;
    gap: 1rem;
    position: relative;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

CodePudding user response：

Try this code hope it fix your issue :)

.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 1rem;
    position: relative;
}
.widget img{
    width: 4rem;
}
.widget p img {
    width: 1.25rem;
    margin-right: 5px;
}
.widget a img {
    width: 1rem;
}
.widget {
    width: 100%; background-color: rgb(242, 242, 242);
    padding: 25px; border-radius: 1rem; 
        
}
.widget button {
    padding: 8px 24px;
    border: solid 1px black;
}
.widget button img {
    width: 1.25rem;
    vertical-align: middle;
}

<body>
    <div >
        <div ><img src="/src/invest-svgrepo-com.svg" alt=""><br>
            <h2>$4,500</h2><br>
            <p>Earned this month</p><br>
            <p><img src="/src/up-arrow-svgrepo-com.svg" alt=""> 6.5% more than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
        <div ><img src="/src/rocket-svgrepo-com.svg" alt=""><br>
            <h2>25</h2><br>
            <p>New Sales</p><br>
            <p><img src="/src/up-arrow-svgrepo-com.svg" alt=""> 16.22% more than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
        <div ><img src="/src/meeting-svgrepo-com.svg" alt=""><br>
            <h2>7</h2><br>
            <p>New Members</p><br>
            <p><img src="/src/diagonal-arrow-svgrepo-com.svg" alt="">-19% than last month</p><br>
            <button>Earning <img src="/src/right-arrow-svgrepo-com.svg" alt=""></button>
        </div>
    </div>
    
    
</body>