Início / coding / Perguntas / 76932094
Accepted
Ole
Asked: 2023-08-19 03:27:51 +0800 CST

Centralizando vários itens em um CSS Grid Container?

  • 772

Nesta demonstração, há dois divs dentro do div do contêiner de grade css. É possível centralizá-los para que o segundo item fique dentro e em cima do primeiro item e ambos sejam centralizados vertical e horizontalmente? Pensei que talvez align-selfo fizesse...

<div
  style="
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 200px;
    width: 200px;
    background-color: blue;
  "
>
  <div
    style="
      width: 100px;
      height: 100px;
      background-color: red;
      align-self: center;
    "
  ></div>
  <div
    style="
      align-self: center;
      width: 50px;
      height: 50px;
      background-color: yellow;
    "
  ></div>
</div>

html

4 respostas

  1. Você pode simplesmente centralizar divisões dentro de divisões adicionando

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

    atributos ao contêiner principal. Então isso vai funcionar:

    <div style=" display: grid;
  height: 200px;
  width: 200px;
  background-color: blue; 
  justify-content: center;
  align-content: center;">
  <div style=" display: grid;
      width: 100px;
      height: 100px;
      background-color: red;
      justify-content: center;
      align-content: center;">
    <div style="
      width: 50px;
      height: 50px;
      background-color: yellow;"></div>
  </div>
</div>

    • 1
  2. Best Answer

    coloque-os na mesma área ( grid-area:1/1) e use- place-selfos para alinhá-los vertical e horizontalmente.

    <div
  style="
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 200px;
    width: 200px;
    background-color: blue;
  "
>
  <div
    style="
      width: 100px;
      height: 100px;
      background-color: red;
      place-self: center;
      grid-area: 1/1
    "
  ></div>
  <div
    style="
      width: 50px;
      height: 50px;
      background-color: yellow;
      place-self: center;
      grid-area: 1/1
    "
  ></div>
</div>

    • 1

  3. Sim, é possível centralizar os dois elementos dentro do contêiner de grade CSS para que o segundo item fique dentro e acima do primeiro item, e ambos sejam centralizados vertical e horizontalmente. As propriedades align-self: center;e justify-self: center;podem ser usadas.

    <div
  style="
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 200px;
    width: 200px;
    background-color: blue;
    position: relative; /* Added to create a positioning context */
  "
>
  <div
    style="
      width: 100px;
      height: 100px;
      background-color: red;
      align-self: center;
      justify-self: center;
      position: relative; /* Added to create a positioning context */
    "
  ></div>
  <div
    style="
      align-self: center;
      justify-self: center;
      width: 50px;
      height: 50px;
      background-color: yellow;
      position: absolute; /* Positioned absolutely within the parent */
      top: 50%; /* Move 50% down from the top */
      left: 50%; /* Move 50% from the left */
      transform: translate(-50%, -50%); /* Center the item */
    "
  ></div>
</div>

    Eu adicionei as seguintes alterações:

    • justify-self: center;foi adicionado a ambos <div>os elementos para centralizá-los horizontalmente dentro da célula da grade.
    • position: relative;foi adicionado a ambos <div>os elementos para criar um contexto de posicionamento para o posicionamento absoluto do interior <div>.
    • Para o amarelo interno <div>, position: absolute;é usado para posicioná-lo absolutamente dentro do contêiner pai.
    • top: 50%; and left: 50%;são usados ​​para posicionar o amarelo <div>50% abaixo do topo e 50% da esquerda, o que coloca seu canto superior esquerdo no centro do pai.
    • transform: translate(-50%, -50%);é usado para deslocar a <div>metade amarela de sua largura e altura para centralizá-la perfeitamente dentro do pai.

    Com esses ajustes, os dois <div>elementos serão centralizados vertical e horizontalmente, e o segundo item ficará dentro e acima do primeiro item.

    • 0

  4. Você pode experimentá-lo

      

 <div
      style="
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        height: 200px;
        width: 200px;
        background-color: blue;
        align-items: center;
        justify-items: center;
      "
    >
      <div
        style="
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          width: 100px;
          height: 100px;
          background-color: red;
          justify-items: center;
        "
        >
          <div
            style="
              width: 50px;
              height: 50px;
              background-color: yellow;
              align-self: center;
            "
            ></div>
      </div>
</div>

    • -1

relate perguntas