How can I center this container in the middle of the screen in CSS?-CodePudding

This CSS is displayed on the second page of a scrolling page. The .container_block is for holding all the cards in its box. The .cards are for displaying the cards and each individual card is represented by card1,2,3, and 4.

.container_block {
    width: 80%;
    height: 40%;
    display: block;
    background-color: red;
    margin: auto;
}

.cards {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards h2 {
    font-size: 25px;
    color: white;
    margin: 15px;
}

.cards p {
    font-size: 20px;
    color: white;
    margin: 15px;
}

.card1 {
    box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 30vh;
    width: 30vh;
    border-radius: 20px;
    margin-top: 4vh;
    margin-right: 5vh;
}

.card2 {
    box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 30vh;
    width: 30vh;
    border-radius: 20px;
    margin-top: 4vh;
    margin-right: 5vh;
}

.card3 {
    box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 30vh;
    width: 30vh;
    border-radius: 20px;
    margin-top: 4vh;
    margin-right: 5vh;
}

.card4 {
    box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 30vh;
    width: 30vh;
    border-radius: 20px;
    margin-top: 4vh;
    margin-right: 5vh;
}

Any tips on simplifying code will also be greatly appreciated!

CodePudding user response：

in .container_block, try replacing "margin: 0;" with "margin: 0 auto;"

CodePudding user response：

Just Wrap the container_block division by another division and name in wrapper.

Apply the below CSS.

Also No need to make multiple Card classes if you are applying same CSS to them just use one class name in all divisions.

    .wrapper{
       width:100%;
       height:100vh;
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .container_block {
        width: 80%;
        height: 40%;
        display: block;
        background-color: red;
        margin: auto;
    }
    
    .cards {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cards h2 {
        font-size: 25px;
        color: white;
        margin: 15px;
    }
    
    .cards p {
        font-size: 20px;
        color: white;
        margin: 15px;
    }
    
    .card1 {
        box-shadow: 1px 1px 8px 6px rgba(0,0,0,0.2);
        transition: 0.3s;
        height: 30vh;
        width: 30vh;
        border-radius: 20px;
        margin-top: 4vh;
        margin-right: 5vh;
    }