CSS的多行子上下居中對于網頁設計來說是非常重要和常用的。許多網站都需要多行子文字的垂直居中。 下面我們來介紹一些不同的實現方式。
方法一:使用“定位+margin”實現垂直居中 /* CSS */ .parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); } /* HTML */ <div class="parent"> <div class="child"> <p>這里是多行子文字</p> </div> </div>
上面的代碼使用了position:absolute屬性來獲得垂直居中。 其中,top屬性值為50%,將子元素的上沿垂直居中。使用transform:translateY(-50%)將它下移一半的高度使其完全居中。
方法二:使用flex布局實現垂直居中 /* CSS */ .parent{ display:flex; justify-content:center; align-items:center; } /* HTML */ <div class="parent"> <p>這里是多行子文字</p> </div>
上面的代碼使用了flex布局來實現多行子文字的垂直居中。使用display:flex屬性指定其為flex布局模式,并使用justify-content:center將子元素水平居中,align-items:center實現子元素垂直居中。
以上就是兩種CSS實現多行子文字上下居中的方法。根據不同情況使用不同的方法,可以提升網頁的美觀程度和易讀性。
上一篇css字數超出長度隱藏
下一篇ajax回調函數獲取部分