我想使用放置项将标题文本放在Flexbox内部居中,但无法正常工作。它只会将其水平居中对齐。
我不知道我要去哪里错了。
根据文档,这应该使其在水平和垂直方向上居中。
CSS place-items简写属性允许您将项目沿对齐 同时显示块方向和行内方向(即align-items和 相关布局系统(例如Grid或 Flexbox。如果未设置第二个值,则也使用第一个值 为此。
@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>
答案 0 :(得分:2)
您需要使用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>
答案 1 :(得分:1)
您使用place-items
给予display: grid;
@keyframes pulsate {
100% {
transform: scale(1.1);
}
}
.header {
display: grid;
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>
有关更多信息:https://css-tricks.com/almanac/properties/p/place-items/