在CSS中,要想實現垂直居中一個元素,需要使用以下方法:
.parent { display: flex; align-items: center; /* 這里是重點,表示在交叉軸方向(垂直方向)上居中 */ }
在這里,我們將父元素設為Flex布局,再利用align-items屬性進行垂直居中。這是最簡單的方法,而且適用于大部分情況。
當然,還有其他方法可以實現垂直居中,例如:
.parent { position: relative; } .child { position: absolute; /* 先將子元素定位為絕對定位 */ top: 50%; /* 將子元素上邊距設為父元素高度的一半 */ transform: translateY(-50%); /* 再將子元素向上移動自身高度的一半,就完成了垂直居中 */ }
至此,我們已經學會了如何使用CSS實現垂直居中。記住,使用Flex布局能夠讓你的開發更加高效而簡潔。