今天公司前端群里有人问了一个这样的问题如下:
如果一个元素是fixed定位,不定宽,不定高,如果只利用css实现页面居中显示
这个本来应该是挺好解决的问题
但是由于加了各种限制,大家都有点蒙了
本人本着对知识的好奇心(有点官方了,哈哈……)
就去百度了一下,终于在一个博客的评论里找到解决办法
方法如下:
position:fixed;left:50%;top:50%;transform: translate(-50%,-50%);
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.demo{
border: 1px solid #ccc;
padding:1em 2em;
border-radius:6px;
background-color: #EFEFEF;
width: 19em;
position: fixed;
top: 50%;
left: 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%);
}
</style>
</head>
<body>
<div class="demo">
<p>我是居中的吗?</p>
<p>我是居中的吗?</p>
<p>我是居中的吗?</p>
</div>
</body>
</html>
应该还有其他方法,暂时就只学会了这一种,等我找到其他方法了,再来更新吧