• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

css让未知大小的div或元素居中

代码笔记 barben 2个月前 (08-06) 61次浏览 0个评论

给已知大小的元素设置上下左右居中

【方法1】定位后,上下左右的位置均设置0,最后设置margin为auto就可以啦!

.photo{
    width: 200px;
    height: 200px; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

【方法2】定位后,上和左的位置为50%,最后设置margin-top为负数高度的一半,margin-left为负数宽度的一半,也一样可以实现上下左右居中啦!

.photo{
    width: 200px;
    height: 200px; 
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

给未知大小的元素设置上下左右居中

这样的话,无论你知不知道元素的宽高,都可以直接设置上和左的位置为50%,然后利用CSS3的属性transform使得元素向左偏移它自身的一半从而达到上下左右居中!

.photo{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
css让未知大小的div或元素居中 - https://www.barben.cn/code/562.html
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址