如何在 CSS 的網站上響應地居中卡片？

Question

所以我正在建立我的編碼日志網站（在學習如何編碼的第 15 天，所以現在只做 HTML 和 CSS）。

我把每一天都編成一張卡片，上面有簡短的描述和截圖。 我希望這些卡片從左上角堆疊（就像我使用 float:left 時所做的那樣） ，但也希望它們始終位於頁面的中心，無論顯示的寬度如何。 我曾嘗試使用 display: inline-block，但隨后卡片從 center 填充，這是我不想要的。

編輯：按照你們的建議，我設法通過使用彈性盒來做到這一點。 這更接近我想要的。 我想要的是底部卡片與最左邊的頂部卡片對齊？ 我將如何實現：現在我的 CSS 看起來像這樣：

.main {
    display: flex;
    flex-wrap: wrap;
    max-width: 95%;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.entry {
    background-color: white;
    width: 360px;
    height: auto;
    float: left;
    padding: 2%;
    margin-top: 2%;
    margin-left: 1%;
    margin-right: 1%;
    border: 10px black solid;
}

.main 是主容器，.entry 是一張卡片

Answer 1

你應該嘗試使用 flexbox 可能會做你想做的事。 試試這個 display: flex; 證明內容：中心； 檢查此站點https://alligator.io/css/centering-using-flexbox/或搜索一些快速 flexbox 指南，我認為您可以使用 Z7F3D565C67F89F27A31D03D 來實現您的願望，而不是嘗試使用一些網格。

Answer 2

您需要為您的卡片添加一個容器。

您可以使用邊距使容器居中，邊距自動從側面推送您的內容，如果您將內容邊距設置為左右自動，它將居中。

 .container { display: flex; flex-wrap: wrap; max-width: 600px; width: 100%; margin: 0 auto; }.card { display: inline-block; border: 1px solid; width: 30%; height: 300px; margin: 1%; }

 <div class="container"> <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam temporibus sequi ipsam repudiandae laborum libero corporis in eaque veniam magnam exercitationem vero consequuntur aut nam, doloremque laboriosam accusantium quidem nobis.</div> <div class="card">Voluptatum nisi cupiditate eos omnis, Dolores, tenetur incidunt quis reiciendis nemo sequi voluptatum neque illo sint porro debitis labore sunt consectetur aliquam rem quisquam, pariatur doloremque cum iste et nobis?</div> <div class="card">Rem, ipsa eaque. Magnam perspiciatis illum incidunt impedit quae tempora labore eligendi dolores iste, consequuntur adipisci perferendis accusantium praesentium possimus voluptatibus assumenda modi ullam libero consectetur accusamus hic facilis excepturi,</div> <div class="card">Atque impedit facere ratione rerum quisquam voluptates saepe fugit. molestiae sed dolorem voluptatum placeat non facilis at, ex harum quis magni rem. Corporis. rerum tempore, Saepe harum optio nam temporibus,</div> <div class="card">Natus suscipit ea sint, esse quasi obcaecati voluptatem dignissimos cupiditate at a. itaque est optio impedit nemo eaque, aut velit sapiente asperiores quaerat unde! Laboriosam illo temporibus inventore quos dolore.</div> </div>

Answer 3

您可以使用以下代碼居中（垂直和水平）：

 .box-1 { border: 1px solid red; height: 250px; width: 250px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

 <div class="box-1"></div>

現場示例：

https://liveweave.com/L3Axh7