我在 a 中有兩個元素div。如何僅垂直居中p元素？
.card {
height: 300px;
background-color: aquamarine;
}
<div >
<h1>Hello</h1>
<p>Always in center vertically</p>
</div>
uj5u.com熱心網友回復：
使用flex: display;和justify-content: center;。這將使p標簽居中對齊。
對齊h1與position: absolute;到需要的位置。
您應該添加position: relative;到.card的h1風格position: absolute;留在里面.card
.card {
height: 300px;
background-color: aquamarine;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 50px;
}
h1 {
position: absolute;
width: 100%;
top: 0;
background: beige;
left: 0;
}<h2>Sample App</h2>
<div class="card">
<h1>Hello</h1>
<p>Always in center vertically</p>
</div>uj5u.com熱心網友回復：
嘗試這個：-
.card {
height: 300px;
background-color: aquamarine;
position:relative;
}
.card p{
position: absolute;
top: 50%;
transform: translate(0, -50%);
margin: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366396.html