css3怎么让文字垂直居中显示


本文摘自PHP中文网,作者V,侵删。

css3让文字垂直居中显示的方法:可以通过使用绝对定位和transform属性来实现,如【position:relative; transform:translate(50%,-50%);】。

实现思路:

通过使用绝对定位和transform属性来实现。

(视频教程推荐:css视频教程)

属性介绍:

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

语法:

1

transform: none|transform-functions;

测试代码:

daefbc1816c3fb9fefbf0dfae9e1baf.png

说明:

这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸,因为transform中偏移的百分比就是相对于元素自身的尺寸而言。

相关推荐:CSS教程

以上就是css3怎么让文字垂直居中显示的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

浅谈CSS3 device-width和width之间的差异

CSS3实现条状百分比效果

CSS3 cubic-bezier()实现链接悬停动画效果的方法介绍

html怎么让文字在图片表面

qq浏览器 不支持CSS3怎么办

有趣的css魔法和布局(代码)

使用modernizr探测html5/CSS3新特性的示例代码分享

background-origin属性怎么用

CSS3的@supports是什么?如何使用

css如何设置垂直居中

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...