CSS中,一個常見的問題就是如何將文字在屏幕中垂直居中。下面是一個方法可以實現這個效果:
display: flex; justify-content: center; align-items: center;
這個方法的實現依賴于彈性布局(Flexbox)。display: flex;
將元素設為彈性容器,justify-content: center;
將元素中的內容水平居中對齊,align-items: center;
將元素中的內容垂直居中對齊。
同時,還需設置HTML和body元素的高度和寬度都為100%:
html, body { height: 100%; width: 100%; }
完整的代碼如下:
html, body { height: 100%; width: 100%; } .container { display: flex; justify-content: center; align-items: center; height: 100%; }
在HTML中,需要將垂直居中的文字包裹在一個容器中:
<div class="container"> <p>垂直居中的文字</p> </div>
這樣就可以實現垂直居中的文字了。