CSS中,要實現ul垂直居中有多種方法,以下介紹其中一種:
ul{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 200px; /*設置ul的高度*/ } li{ height: 50px; }
以上代碼使用了flexbox布局,需要設置ul的高度,通過flex-direction屬性設置主軸為縱軸, justify-content屬性和align-items屬性都設置為center,實現內容垂直和水平居中。
需要注意的是,如果ul的高度不確定,可以通過使用position屬性和transform屬性來實現居中。
ul{ position: absolute; top: 50%; transform: translateY(-50%); }
以上代碼使用了絕對定位,將ul的上邊緣定位到父容器的中心線上, 然后再通過transform屬性向上移動ul的50%高度,實現垂直居中。