【css】文字垂直居中
生活随笔
收集整理的這篇文章主要介紹了
【css】文字垂直居中
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前言
- html在線運行https://www.runoob.com/runcode
方法1：容器高度不固定
- 將容器的padding-top和padding-bottom的值設(shè)置成相等的值。
方法2：容器高度固定
<!DOCTYPE html> <html> <head> <style> div.test { height: 60px; border:1px solid #000000; line-height: 60px; } </style> </head> <body> <div class="test">我要居中</div> </body> </html>方法3：flex布局
<!DOCTYPE html> <html> <head> <style> div.test { height: 120px; border:1px solid #000000;display: flex; align-items: center; /*定義body的元素垂直居中*/ } </style> </head> <body> <div class="test">我要居中</div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的【css】文字垂直居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 支付宝怎么离线支付? Apple Wat
- 下一篇： 【阿里云OSS】OSS概述