如何在CSS Grid中居中？

王林轉載: 2023-08-22 23:13:011393瀏覽

網格以行和列佈局的形式排列內容。 CSS網格也是如此。

在CSS Grid中使用Flex進行居中

將網格項目設定為彈性容器−

display: flex

要垂直和水平居中，使用−

align-items: center;
justify-content: center;

範例

讓我們來看一個完整的例子 −

<!DOCTYPE html>
<html>
<head>
   <title>Grid and Flex Example</title>
   <style>
      html,body {
         margin: 0;
         padding: 0;
      }

      .box {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 100vh;
      }

      .first,
      .second {
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .first {
         background-color: orange;
      }

      .second {
         background-color: yellow;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="first">Left</div>
      <div class="second">Right</div>
   </div>
</body>
</html>

輸出

使用CSS Grid實作居中，無需使用Flex

我們也可以不使用Flex來居中。我們將網格容器設定為display: grid。當display屬性設定為grid時，HTML元素將成為網格容器 -

grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: 150px;
   grid-gap: 20px;
}

網格專案使用相對定位設定 -

grid-item {
   position: relative;
   text-align: center;
}

範例

然而，

<!DOCTYPE html>
<html>
<head>
   <title>Grid</title>
   <style>
      grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-auto-rows: 150px;
         grid-gap: 20px;
      }

      grid-item {
         position: relative;
         text-align: center;
      }

      grid-container {
         background-color: red;
         padding: 10px;
      }

      grid-item {
         background-color: orange;
      }
   </style>
</head>
<body>
   <grid-container>
      <grid-item>This is in the center</grid-item>
      <grid-item>This is in the center</grid-item>
   </grid-container>
</body>
</html>

輸出

以上是如何在CSS Grid中居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：在CSS中使用`:visited`偽類的用法下一篇：在CSS中使用`:visited`偽類的用法

看更多