CSS中實現文字上下居中一直是前端開發者經常遇到的一個問題。在本文中,我們將介紹一些CSS代碼,來幫助您實現文字上下居中。
/*方法一:通過line-height實現*/ .center { line-height: 200px; /*與高度相同的行高*/ height: 200px; text-align: center; } /*方法二:通過position實現*/ .container { position: relative; height: 200px; } .text { position: absolute; top: 50%; transform: translateY(-50%); } /*方法三:通過display:flex實現*/ .container { display: flex; align-items: center; justify-content: center; height: 200px; }
以上三種方法都可以實現文字上下居中,您可以根據實際需求選擇其中一種。需要說明的是,對于方法二和方法三來說,容器一定要設置固定高度。
下一篇mysql打錯