首页 > 其他 > 详细

实现元素垂直居中的方法(补充)

时间:2017-08-02 23:09:16      阅读:152      评论:0      收藏:0      [点我收藏+]

        之前发过一次《实现元素垂直居中的方法》的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo:

<!DOCTYPE html>
<html>
<head lang="zh-cn">
   <meta charset="UTF-8">
   <title>居中的方法</title>
   <style>
       div{
           position:absolute;
           left:50%;
           top:50%;
           -webkit-transform: translate(-50%,-50%);
           -moz-transform: translate(-50%,-50%);
           -ms-transform: translate(-50%,-50%);
           -o-transform: translate(-50%,-50%);
           transform: translate(-50%,-50%);
           background: #ddd;
       }
   </style>
</head>
<body>
<div>示例文字:本段话的宽度,高度不确定,且可能发生变化。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut commodi deserunt distinctio eligendi enim error eum exercitationem fugiat in, laudantium molestias perferendis, porro possimus quibusdam quisquam sequi tempore veniam.</div>
</body>
</html>

怎么样?是不是很方便,新技能get!

不知道在看文章的你有没有更好的方法,欢迎一起讨论。

实现元素垂直居中的方法(补充)

原文:http://www.cnblogs.com/gaoxinwu/p/7277071.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!