实现元素垂直居中的方法(补充)
之前发过一次《实现元素垂直居中的方法》的文章,今天又碰到了更简便的方法,就是利用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!
不知道在看文章的你有没有更好的方法,欢迎一起讨论。