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

Posted 高辛戊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现元素垂直居中的方法(补充)相关的知识,希望对你有一定的参考价值。

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

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

以上是关于实现元素垂直居中的方法(补充)的主要内容,如果未能解决你的问题,请参考以下文章

CSS水平居中+垂直居中+水平/垂直居中的方法总结

关于flex布局垂直居中

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

CSS-居中方法汇总

实现元素垂直居中的方法

实现未知元素垂直居中的方法