Home / Questions / 314534
Accepted
EMCode
Asked: 2020-12-08 08:33:44 +0800 CST 2020-12-08 08:33:44 +0800 CST

CSS Grid的垂直居中问题

  • 772

好吧，我不能使用 CSS Grid 垂直居中内容，使用 Flexbox 我没有问题，我只是从 CSS Grid 开始。这是我尝试过的：

使用带有transformand的经典方法translateY：

.body {
  height: 100%;
}

.grid {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

我还尝试使用像这样包装网格的容器：

.container {
  align-items: center;
  justify-content: center;
  height: 100%;
}

但这些都对我不起作用。

我想要的是将divwith 类.grid相对于页面加载的设备的高度居中（这就是我添加100vhto的原因body）。

我分享我的代码：

* {
  box-sizing: border-box;
}

body {
  color: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  align-items: center;
  margin: 2rem!important;
}

.grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: [inicio-contenido] 1fr [fin-contenido];
  grid-template-rows: auto [inicio-contenido] auto [fin-contenido];
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: 4fr [inicio-contenido] 4fr [fin-contenido];
  }
  header {
    grid-column: 1 / 3;
  }
  aside {
    grid-column: 1;
    grid-row: 2;
  }
  footer {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

article {
  grid-column: inicio-contenido;
  grid-row: inicio-contenido;
}

header,
aside,
article,
footer {
  background: #333;
  padding: 2rem;
  border-radius: .4rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<body>

  <div class="grid">
    <header>Header</header>
    <aside>Aside</aside>
    <article>
      <h1>Mi título</h1>
      <p>Contenido cool</p>
    </article>
    <footer>Footer</footer>
  </div>

</body>

PS：出于某种原因，在片段中，它首先采用了我的样式normalize.css而不是我的样式，因此我不得不添加 !important正文。

我附上我想要实现的图像：A 面是我目前拥有的，B 面是我想要的，居中取决于浏览器的高度。

示例图片

html

2 Answers

  1. Best Answer

    考虑：

    • 使用网格设置网格的结构
    • 使用更好的 flexbox 在其 2 个轴之一上对齐元素

    你可以这样构建它。

    过程

    • div对带有 class的父标签，即应用一个gridlabel ，这样它的子节点，也就是带有 class 的那个，变得灵活，我们可以将它移动到构成弹性盒bodydisplay: flex;divgrid
    • 这将暂时移动您的 div 的布局，将所有内容从一端从左到右，因为所有内容都适合主轴

    例子

        <style>
      body{
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
      header {
        grid-column: 1/3;
        background: grey;
      }
      aside {
        grid-column: 1/2;
        background: grey;
        margin-top: 10px;
        margin-right: 10px;
      }
      article {
        background: grey;
        margin-top: 10px;
      }
      footer {
        background: grey;
        margin-top: 10px;
        grid-column: 1/3;
      }
    </style>
    <body>
    
      <div class="grid">
        <header>Header</header>
        <aside>Aside</aside>
        <article>
          <h1>Mi título</h1>
          <p>Contenido cool</p>
        </article>
        <footer>Footer</footer>
      </div>
    
    </body>

    注意：在JS Fiddle等系统中尝试此代码，以便您更好地了解它是如何工作的

    我在示例中添加了片段

    • 4

  2. 尝试通过 CSS 将垂直居中放置在特定容器标签上：

    .centrado {vertical-align: middle;display:inline;}

<div class="grid">
<header>Header</header>
<aside>Aside</aside>
<article>
<div class="centrado">
<h1>Mi título</h1>
<p>Contenido cool</p>
</div>
</article>
<footer>Footer</footer>
</div>
    • 1