在屏幕中央對齊我的無序列表/div

Question

我正在嘗試將屏幕中央的車展與所有在行中的列表項對齊/不轉到下一行。 我嘗試過的一些事情是將頂部和底部的邊距設置為 10%，理論上可以，但對其他屏幕尺寸沒有響應。

HTML代碼：

    <div class="car-showcase">
        <ul>
            <li>
                <h4>Car #1</h4>
                <img class="car-model" src="assets/img/car.png">
                <br>
                <a href="#">View car</a>
            </li>
            <li>
                <h4>Car #2</h4>
                <img class="car-model" src="assets/img/car.png">
                <br>
                <a href="#">View car</a>
            </li>
            <li>
                <h4>Car #3</h4>
                <img class="car-model" src="assets/img/car.png">
                <br>
                <a href="#">View car</a>
            </li>
        </ul>
    </div>

CSS代碼：

/* Car showcase */
.car-showcase {
    padding: 0px;
}

.car-showcase ul {
    list-style-type: none;
    text-align: center;
}

.car-showcase ul li {
    display: inline-block;
    margin: 3% 5% 0% 5%;
}

/* Car title */
.car-showcase ul li h4 {
    font-size: 20px;
}

/* View car button */
.car-showcase ul li a {
    color: white;
    background-color: #ae9595;
    text-decoration: none;
    padding: 0.5% 10%;
    transition: 0.5s;
}

.car-showcase ul li a:hover {
    color: rgba(255, 255, 255, 0.719);
    padding: 2% 15%;
}

/* Car image */
.car-model {
    width: 350px;
}

Answer 1

您可以使用display:flex並在中心對齊項目。 此外，我將div的高度設置為100vh ，以對齊任何屏幕中心的項目。

.car-showcase {
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}