javascript - Not able to center inside flexbox vertically using place-items
问题描述
I want to centre the header text inside a flexbox using place-items but it isn't working. It only aligns it centre horizontally.
I don't know where I am going wrong.
According to the documentation, this should centre it horizontally and vertically.
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">
 
</div>
<div class="slide one right">
 
</div>
<div class="header">
<h1>Hey there! I am Siddharth </h1>
</div>
</div>
解决方案
您需要使用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">
 
</div>
<div class="slide one right">
 
</div>
<div class="header">
<h1>Hey there! I am Siddharth </h1>
</div>
</div>
推荐阅读
- windows - 从没有 UI 的命令行启动 Visual Studio 调试器
- javascript - 与 discord.js 的 Bot discord 似乎在多个实例上运行
- nginx - kubernetes 使用入口控制器进行负载平衡
- javascript - puppeteer 中的条件语句取决于 html 元素的可见性
- android - 当前选项卡始终位于中心的可滚动 TabLayout
- swift - SwiftUI:将视图信息传递给 UIKit
- python - Selenium Python:Actions.move_to_element 不起作用
- perl - 如何从 .txt 文件运行?
- sql - 对两个以上的表使用 sql join 的正确方法是什么?
- javascript - Vue、Firebase、Vuexfire:如何跟踪当前用户?