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

        之前发过一次《实现元素垂直居中的方法》的文章,今天又碰到了更简便的方法,就是利用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!

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

posted on 2017-08-02 22:05  高辛戊  阅读(126)  评论(0编辑  收藏  举报

导航

本博客的文章如无特殊说明,均为原创,转载请注明出处。如未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。