致一个奇葩的面试题

最新推荐文章于 2021-03-16 14:17:26 发布

细听夏伤

最新推荐文章于 2021-03-16 14:17:26 发布

阅读量234

点赞数

文章标签：前端 ViewUI

本文链接：https://blog.csdn.net/princess_prince/article/details/84690490

版权

今天公司前端群里有人问了一个这样的问题如下：

如果一个元素是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>

应该还有其他方法，暂时就只学会了这一种，等我找到其他方法了，再来更新吧

细听夏伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
致一个奇葩的面试题

今天公司前端群里有人问了一个这样的问题如下：如果一个元素是fixed定位，不定宽，不定高，如果只利用css实现页面居中显示这个本来应该是挺好解决的问题但是由于加了各种限制，大家都有点蒙了本人本着对知识的好奇心（有点官方了，哈哈……）就去百度了一下，终于在一个博客的评论里找到解决办法方法如下：position:fixed;left:50%;top:50%;transf...
复制链接

扫一扫