如何在CSS Grid中居中？

百变鹏仔 3个月前 (09-20) #CSS

文章标签如何在

网格以行和列布局的形式排列内容。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中居中？

在CSS Grid中使用Flex进行居中

示例

输出

使用CSS Grid实现居中，无需使用Flex

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写