css3 - CSS关于垂直居中，大家有没有什么比较好的建议。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

css3 - CSS关于垂直居中，大家有没有什么比较好的建议。

怪我咯 2017-04-17 11:34:36

[CSS3讨论组]

1732

题主目前在工作中经常遇到这种问题。
例如：在高度固定的时候如果文本是一行的话，垂直居中，如果两行的话也是垂直居中，当第三行的时候就隐藏（如果有‘...’的话当然最好）。有没有简单而有效的方法？
谢谢，么么哒。

怪我咯

走同样的路，发现不同的人生

全部回复(7)

PHP中文网2017-04-17 11:36:36 7楼

老生常谈的话题啦 centering in CSS

赞 +0

添加回复

黄舟2017-04-17 11:36:36 6楼

用js计算写top值

赞 +0

添加回复

天蓬老师2017-04-17 11:36:36 5楼

使用flex

赞 +0

添加回复

PHPz2017-04-17 11:36:36 4楼

css垂直居中就那几种方法。
像我怕麻烦的都直接用js来居中。
但最好的还是flex，其次是用talbe居中，然后是position+transform。这三种应该都是可变高度的。

赞 +0

添加回复

PHPz2017-04-17 11:36:36 3楼

inline-block和绝对居中两种方式是最常用的

赞 +0

添加回复

阿神2017-04-17 11:36:36 2楼

css3有个技巧：
{ position: relative; top: 50%; transform: translateY(-50%);}

赞 +0

添加回复

PHP中文网2017-04-17 11:36:36 1楼

flex 固然好，但是说起 IE 满脸泪

说一个我一直在用的 inline-block 方法

<p class="vMiddle"><i></i><span>一行两行三行四行高度不确定</span></p>

.vMiddle {
    &, i { height: 150px;} // i 和父层高度一样
    i, span { display: inline-block; vertical-align: middle;}
    i { width: 0;}
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>