CSS中,對象的垂直居中是一項很重要的技能。在許多情況下,我們需要將對象居中對齊,以達到更好的頁面布局和美觀。下面將介紹一些常用的垂直居中的方法。
方法一:使用flexbox
父容器的CSS代碼: display: flex; align-items: center; justify-content: center;
該方法使用的是flexbox的特性,將父容器設置為彈性布局,并使用align-items和justify-content屬性以及相應的值,即可將對象垂直居中。
方法二:使用table-cell
父容器的CSS代碼: display: table-cell; vertical-align: middle;
該方法將父容器設置為表格單元格布局,使用vertical-align屬性的middle值,即可將對象垂直居中。
方法三:使用position和transform
對象的CSS代碼: position: absolute; top: 50%; transform: translateY(-50%);
該方法使用的是position和transform屬性,通過將對象的position屬性設置為absolute,再使用top:50%將對象的上沿放置在父容器的中央,最后使用transform:translateY(-50%)將對象向上移動50%的高度即可實現垂直居中。
以上就是常用的幾種垂直居中的方法,不同的方法適用于不同的場景,根據自己的需求選擇相應的方法即可。
上一篇css 導航 位置