扫码关注官方订阅号
人生最曼妙的风景，竟是内心的淡定与从容！
直接设置上下相同的padding就可以了， 可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。。而高度变化正好是题主的要求。demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <title> 多行文字实现垂直居中 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .tx-verti-center{ padding: 25px; border: 1px solid #FF0099; width: 760px; } </style> </head> <body> <p class="tx-verti-center"> 现在我们要使这段文字垂直居中显示！阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待 阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待 阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待 </p> <p class="tx-verti-center"> 现在我们要使这段文字垂直居中显示！阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待 </p> </body> </html>
用 flex 布局，配合属性 align-items: center 来实现。
flex布局最简单快捷
absolute定位，top：50%;transform3d: (0, -50%, 0);
中间的文字区域设置为display: inline-block; vertical-align: middle;
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
3
477
收藏
直接设置上下相同的padding就可以了， 可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。。而高度变化正好是题主的要求。demo:
用 flex 布局，配合属性 align-items: center 来实现。
flex布局最简单快捷
absolute定位，top：50%;transform3d: (0, -50%, 0);
中间的文字区域设置为display: inline-block; vertical-align: middle;