今日面试题：CSS实现固定宽高的div在不同分辨率屏幕上下左右居中？

最新推荐文章于 2023-03-01 09:15:19 发布

eng_ao

最新推荐文章于 2023-03-01 09:15:19 发布

阅读量1k

点赞数

分类专栏：学习日记文章标签： CSS 前端面试

本文链接：https://blog.youkuaiyun.com/weixin_43572329/article/details/89440825

版权

学习日记专栏收录该内容

6 篇文章

订阅专栏

方案一：基于Flexbox的解决方案（最佳）

body{
    display: flex; //给父元素设置display：flex
    min-height: 100vh; //vh表示视口高度的1%
    margin: 0;
}


div{
    width: 200px;
    height: 200px;
    margin: auto; //使用Flexbox时，margin实现上下左右居中
}

注：宽高不固定时，也可以使用，即使浏览器支持程度没有绝对定位好，也是最佳方案！

方案二：绝对定位方案

div{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; //元素高度的一半
    margin-left: -100px; //元素宽度的一半   
}

注：此方法要求元素宽高固定。不固定却想使用position时，可以把后两行代码换成transform：translate(-50%,-50%)。