大家好，今天我們來淺談一下CSS中多行上下居中顯示的問題。 在CSS中，實現(xiàn)單行文本上下居中是很容易的，可以使用vertical-align屬性來實現(xiàn)，例如： ```css p { display: table-cell; vertical-align: middle; } ``` 但是當(dāng)我們需要讓多行文本上下居中時，就需要使用一些其他的技巧了。 一、使用Flexbox 在CSS3中，F(xiàn)lexbox彈性盒子模型為我們提供了非常便捷的布局方式，可以輕松實現(xiàn)多行文本上下居中。具體操作如下： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 上述代碼中，我們將外層元素設(shè)為彈性盒子，將flex-direction屬性設(shè)為默認(rèn)的row，這樣子元素就會橫向排列。同時，使用align-items和justify-content屬性使元素在縱向和橫向上居中。 二、使用絕對定位 我們可以使用絕對定位來實現(xiàn)多行文本上下居中，具體步驟如下： ```css .container { position: relative; } .container p { position: absolute; top: 50%; transform: translateY(-50%); } ``` 上述代碼中，我們將父元素設(shè)為position: relative，然后子元素設(shè)為position: absolute，通過top: 50%使元素上下居中，再使用transform屬性中的translateY(-50%)將元素向上移動自身高度的一半，從而實現(xiàn)完美居中。 以上就是兩種實現(xiàn)多行文本上下居中的方式，不同的情況我們可以選擇不同的方法來解決問題。希望本文能夠?qū)Υ蠹矣兴鶐椭?/div>