在頁面上居中回應矩陣-有解無憂

我的目標是將以下回應矩陣垂直居中，以便左側和右側與螢屏邊緣的距離相同（父級的寬度為 100%）。能否請你幫忙？謝謝你。我的代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>image matrix</title>
    <style>
        html, body{margin: 0; width: 100%; height: 100%;}
        .container {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        }

        .cell {
            border: 0px solid darkred;
            height: 50px;
            width: 150px;
            margin: 20px;
            background-color: #058;
        }
    </style>
</head>
<body>

<!-- this program illustrates responsive design without the use of media queries -->

    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>
</html>

uj5u.com熱心網友回復：

使用Flexbox，您可以通過以下代碼實作相同的效果。您的單元格將始終位于中心，無需根據需要使用任何媒體查詢。

 
        html, body{
          margin: 0; width: 100%;               height: 100%;
        }

        .container {
            width: 100vw;
            display: flex;
            flex-wrap:wrap;
            justify-content:center;
        }

        .cell {
            border: 0px solid darkred;
            height: 50px;
            margin: 20px;
            background-color: #058;
            flex-basis:150px;
        }

<!-- this program illustrates responsive design without the use of media queries -->

    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

CODEPEN 鏈接：https : //codepen.io/emmeiWhite/pen/vYeZayL

uj5u.com熱心網友回復：

您可以添加margin: 0px auto ;到您的容器中。

      html, body{margin: 0; width: 100%; height: 100%;}
        .container {
            width: 60%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            margin: 0px auto ;
        }

        .cell {
            border: 0px solid darkred;
            height: 50px;
            width: 150px;
            margin: 20px;
            background-color: #058;
        }

<!-- this program illustrates responsive design without the use of media queries -->

    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387167.html

標籤：css

上一篇：如何從復選框/標簽內部移動文本

下一篇：如何制作圓形或自定義邊框半徑css