javascript - 无法使用放置项将 <div> 在 Flexbox 内垂直居中

Question

我想使用位置项将标题文本置于 flexbox 中的中心，但它不起作用。它仅水平居中对齐。

我不知道我错在哪里。

根据文档，这应该使其水平和垂直居中。

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

@keyframes pulsate {
  100% {
    transform: scale(1.1);
  }
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  place-items: center;
  position: absolute;
  background-color: black;
  color: white;
  opacity: 50%;
  z-index: 2;
}

.slide {
  border: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  animation: pulsate 1s;
  animation-iteration-count: infinite;
}

.one.left {
  background: url("https://lh3.googleusercontent.com/yJ4R19Ai7d5O2wtdvSvX8j9MZ6eN31sE9Xs1d-FCGbYsYojVT5be2NNmE6AEfjDa4B1hD-AIGuoEHREV89qArqOnL-MPVdVE5WVgiy-uynCvLMJnQWQKd-CyU7a7G6v38D9llkD6Qy0SCAnC7Vyt0cAFKoUALyzf6TTyFW1trq3ADKyFxPmz4M3EjOqQvlvY-rLk29oH-EPtjr6igANEU-nw0QIoUPlROrNSUiR272r6jtv5U2Z5jAwyo5g9dXNKDVQpzCNcCJTnzLJxAKM_dzj-sW4hjNJY_YI9rZSZ2SmLHRf2Qzx3zwCl-9O39a3N6r1aZFhBISnn3pfU_xJSFhbSl4VCO7sxWvOlUDDH4_lZMqGdKGxUIofG3fbcwF5-RxpU_Du9f3mU-MfMJJslRMI7Ye0gDzHdVAoHv4A3IVYQzmW9sUtYxD0oHacNe0ZqNeQbwcoJWLAKLWZV-dg4vAAYmqhMqbcU2G2B0tDlbHRal0IQKGcdkDhiWJIbIPZAcYoSb0OAOpaezaawcrn0gE75FY_lISqJAquZ75uZIZkvYdg4zAIc02D_PdQ-3Q80oAejrTD6sUGPy8HmBLyC9DFy252_6J18ZPGKcresnKmiO6t5ZSZoiC__h5kpL5V5nXtsDO4SUrPHrI-kbFE7s_y6F21r-IQR5TjbBv1qF33uDAz_14g1HSZISA3ZNGo=w1705-h959-no?authuser=0");
}

.one.right {
  background: url("https://lh3.googleusercontent.com/uHI1xEjND8gDRoNS69jDQ1L46Jj2vG8L_3uGMCrLWopEE_V2-7sUzRlJB8eiGUiOaN4SOR3L3PFh8s9aAV2FbY0rE_BsG9if1tH6ScIqpXhq2j4hZWEmavPxrPPmrnKW1LYMZE2LZdBn_rOZF93SfAj19ZBemw5Vda8k123lrszYnP83wIVPsGKThhE276ctx3yien2Z8iZeDbc93iQRAxEhUmg9nCShbEqqd7hcIt_361OVpGkMy6N3SBTzzdpExNk3luqih-kn5W9GlF7g44ajUMEoTzDW9OceTDKRRUS0Daa8nDp1xrAPwxm-BxdvMvAZQE3B7Lf2ZlaX6I7WCB1hRHkVh3EkDXkh5bSJfBNiL4gEtLLfVmMc2LwjG5Cl6Cj9b_QqBI40loT8RNPJLI-uJa9E_JACf_YIl6ynlogPDJ7x8BeDGcY8CP23UYspqcmBYfKPhxWukC81nVEYwVZy_5G_mO_UZJfsjySUovdZP8hv-Y47m5qv99BDQ5MgAYDjTVJzWjW___shXvnEUSyia4rK16Rxg5ch54g1LO7QbDUA15JorXPER0pnIf0VYUzdhp3ZKRX9tjLpm4ioS16fY9pWVGtSBxhyl__qilqAu5vd7tJaKZudSfyQ2YPahjkZoKXgoZgkfEWGuAFzxJ3yffBJP_tcN0rbKi6W996vcx03e6ygWbpalRAZbSo=w1279-h959-no?authuser=0");
  background-position: center right;
}

.left {
  clip-path: polygon(100% 0, 0 0, 0 100%);
  float: left;
  z-index: 1;
  background-position: right bottom;
  animation-direction: alternate;
}

.right {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  float: right;
  z-index: 0;
  animation-direction: alternate-reverse;
}

.slider {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<div class="slider">
  <div class="slide one left">
    &nbsp
  </div>
  <div class="slide one right">
    &nbsp
  </div>
  <div class="header">
    <h1>Hey there! I am Siddharth 💗</h1>
  </div>
</div>

Answer 1

您需要使用align-items: center和justify-content:center来达到预期的结果。

现场演示:

@keyframes pulsate {
  100% {
    transform: scale(1.1);
  }
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  position: absolute;
  background-color: black;
  color: white;
  opacity: 50%;
  z-index: 2;
  justify-content: center;
}

.slide {
  border: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  animation: pulsate 1s;
  animation-iteration-count: infinite;
}

.one.left {
  background: url("https://lh3.googleusercontent.com/yJ4R19Ai7d5O2wtdvSvX8j9MZ6eN31sE9Xs1d-FCGbYsYojVT5be2NNmE6AEfjDa4B1hD-AIGuoEHREV89qArqOnL-MPVdVE5WVgiy-uynCvLMJnQWQKd-CyU7a7G6v38D9llkD6Qy0SCAnC7Vyt0cAFKoUALyzf6TTyFW1trq3ADKyFxPmz4M3EjOqQvlvY-rLk29oH-EPtjr6igANEU-nw0QIoUPlROrNSUiR272r6jtv5U2Z5jAwyo5g9dXNKDVQpzCNcCJTnzLJxAKM_dzj-sW4hjNJY_YI9rZSZ2SmLHRf2Qzx3zwCl-9O39a3N6r1aZFhBISnn3pfU_xJSFhbSl4VCO7sxWvOlUDDH4_lZMqGdKGxUIofG3fbcwF5-RxpU_Du9f3mU-MfMJJslRMI7Ye0gDzHdVAoHv4A3IVYQzmW9sUtYxD0oHacNe0ZqNeQbwcoJWLAKLWZV-dg4vAAYmqhMqbcU2G2B0tDlbHRal0IQKGcdkDhiWJIbIPZAcYoSb0OAOpaezaawcrn0gE75FY_lISqJAquZ75uZIZkvYdg4zAIc02D_PdQ-3Q80oAejrTD6sUGPy8HmBLyC9DFy252_6J18ZPGKcresnKmiO6t5ZSZoiC__h5kpL5V5nXtsDO4SUrPHrI-kbFE7s_y6F21r-IQR5TjbBv1qF33uDAz_14g1HSZISA3ZNGo=w1705-h959-no?authuser=0");
}

.one.right {
  background: url("https://lh3.googleusercontent.com/uHI1xEjND8gDRoNS69jDQ1L46Jj2vG8L_3uGMCrLWopEE_V2-7sUzRlJB8eiGUiOaN4SOR3L3PFh8s9aAV2FbY0rE_BsG9if1tH6ScIqpXhq2j4hZWEmavPxrPPmrnKW1LYMZE2LZdBn_rOZF93SfAj19ZBemw5Vda8k123lrszYnP83wIVPsGKThhE276ctx3yien2Z8iZeDbc93iQRAxEhUmg9nCShbEqqd7hcIt_361OVpGkMy6N3SBTzzdpExNk3luqih-kn5W9GlF7g44ajUMEoTzDW9OceTDKRRUS0Daa8nDp1xrAPwxm-BxdvMvAZQE3B7Lf2ZlaX6I7WCB1hRHkVh3EkDXkh5bSJfBNiL4gEtLLfVmMc2LwjG5Cl6Cj9b_QqBI40loT8RNPJLI-uJa9E_JACf_YIl6ynlogPDJ7x8BeDGcY8CP23UYspqcmBYfKPhxWukC81nVEYwVZy_5G_mO_UZJfsjySUovdZP8hv-Y47m5qv99BDQ5MgAYDjTVJzWjW___shXvnEUSyia4rK16Rxg5ch54g1LO7QbDUA15JorXPER0pnIf0VYUzdhp3ZKRX9tjLpm4ioS16fY9pWVGtSBxhyl__qilqAu5vd7tJaKZudSfyQ2YPahjkZoKXgoZgkfEWGuAFzxJ3yffBJP_tcN0rbKi6W996vcx03e6ygWbpalRAZbSo=w1279-h959-no?authuser=0");
  background-position: center right;
}

.left {
  clip-path: polygon(100% 0, 0 0, 0 100%);
  float: left;
  z-index: 1;
  background-position: right bottom;
  animation-direction: alternate;
}

.right {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  float: right;
  z-index: 0;
  animation-direction: alternate-reverse;
}

.slider {
  height: 100%;
  width: 100%;
  background-color: lightgray;
}

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<div class="slider">
  <div class="slide one left">
    &nbsp
  </div>
  <div class="slide one right">
    &nbsp
  </div>
  <div class="header">
    <h1>Hey there! I am Siddharth 💗</h1>
  </div>
</div>