CSS Свойство которое объединяет в одно align-items: center; justify-content:center?

Question

Подскажите пожалуйста, забыл как называется

body {
  margin:0;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color:red;
}

<div class="box"></block>

свойство которое объединяет в себе эти два значения ?

Answer 1

Свойство, которое Вы имеете в виду, и которое позволяет располагать элементы одновременно по двум осям, называется - place-items.

Не смотря на то, что это свойство добавлено довольно давно, ведёт себя предсказуемо только если указано display: grid;. В случае, если указано display: flex, то корректность работы не гарантируется (в особенности это касается ранней реализации этого свойства и устаревших браузеров).

body{margin:0;height:100vh;background-color:#fff;background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);background-position:0% 0%;background-repeat:no-repeat;background-size:auto;display:flex;justify-content:space-around;align-items:center;font:28px/28px Arial;color:#fff}

aside.grid { display: grid; }
aside.flex { display: flex; }
aside {
  place-items: center;
  
  height: 90vh; width: 45vw; box-shadow: inset 0 0 30vh 1px red;
}

aside > div {
  display: inherit;
  place-items: center;
  
  height: 100px; width: 100px; box-shadow: inset 0 0 3vh 1px blue;
}

<aside class="grid"><div>GRID</div></aside>
<aside class="flex"><div>FLEX</div></aside>

БЛОГ НА HUSL

CSS Свойство которое объединяет в одно align-items: center; justify-content:center?

Ответы (1 шт):