CSS Целевая страница в сетке / одно изображение

Question

Я пытаюсь взять одно изображение и центрировать его, используя сетку CSS, и как способ научиться сетке, и потому, что моя страница требует одного центрированного изображения. Изображение центрируется слева направо, но не сверху вниз. Он находится прямо наверху. Я уменьшил изображение, чтобы облегчить просмотр в тестовых целях. Размер моего изображения менее важен, чем его размещение. Что я делаю не так?

Кроме того, мне нужно это в сетке 3x3, а не какое-то другое числовое значение.

.wrapper {
    display: grid;
    display: flex;
    justify-content: center;
}

.ConstructGrid {
    justify-items: center;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1px;
    grid-template-areas: ". . ." ". picture ." ". . .";
}

        <div class="wrapper">
            <div class="ConstructGrid">
                <img class="picture" src="http://www.cafenocturne.com/images/Under_Construction.png" border="0" width="400">
            </div>
        </div>

Answer 1

Это проще, чем вы думаете. контейнер должен быть сеткой, внутри вы можете установить дочерний элемент в его области / ячейке. также требуется высота или минимальная высота, даже если 1fr будет управлять некоторой высотой

body {
margin:0;
}
.wrapper {/* i draw the grid , i'm the boss !*/
  height: 100vh;/* let me lay from top to bottom. I'm the boss, i want it whole  */
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  grid-template-areas: ". . ." ". picture ." ". . .";
}

.ConstructGrid {
  grid-area: picture;/* tell me where to be, i'm the prisoner */
  margin:auto;/* let me be in the center of my area/cell  :) */
}

<div class="wrapper">
  <div class="ConstructGrid">
    <img class="picture" src="http://www.cafenocturne.com/images/Under_Construction.png" border="0" width="400">
  </div>
</div>

Answer 2

У вас не должно быть одновременно отображаемой сетки и отображаемой гибкости в одном блоке кода, иначе он будет перезаписан другим. В вашем коде есть display: flex чуть ниже отображаемой сетки.

Отображаемая сетка будет применяться, когда вы удалите display flex из .wrapper.

Answer 3

Вы не использовали сетку. Потому что вы не установили display:grid для .ConstructGrid. Вы можете использовать только flexbox для центрирования изображения. Также вы должны установить height: 100%, чтобы центрировать его по вертикали.

html,
body,
.wrapper,
.ConstructGrid {
  height: 100%;
}

.ConstructGrid {
  display: flex; /* this can be display: grid also */
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="ConstructGrid">
    <img class="picture" src="http://www.cafenocturne.com/images/Under_Construction.png" border="0" width="400">
  </div>
</div>

Answer 4

Я бы решил это так, чтобы зарезервировать центрированную область для изображения. Я использую .picture-container как элемент обтекания для изображения и использую адаптивную ширину и высоту, чтобы правильно центрировать его. Flex используется только внутри Wrap-Element для изображения, поэтому он не мешает Css -Grid:

body{
            height: 100vh;
            width: 100vw;
            padding: 0;
            margin: 0;
        }
        .wrapper {
            height: 100%;
            width: 100%;
            display: grid;
            justify-items: center;
            grid-template-rows: auto;
            grid-template-columns: 25% 25% 25% 25%;
            grid-template-areas:
                    ". . . ."
                    " . image image ."
                    ". . . .";
        }
        .picture-container{
            grid-area: image;
            display: flex;
            align-items: center;
            justify-content: center;
        }

<div class="wrapper">
        <div class="picture-container">
            <img class="picture" src="http://www.cafenocturne.com/images/Under_Construction.png" border="0">
        </div>
</div>

Я также всегда предпочитаю устанавливать высоту и ширину для всей вашей области в таких случаях, как этот, поэтому я добавил их в тело. Это упрощает размещение элементов.