实现元素垂直居中的方法(补充)
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！
不知道在看文章的你有没有更好的方法，欢迎一起讨论。
以上是关于实现元素垂直居中的方法(补充)的主要内容，如果未能解决你的问题，请参考以下文章