学会这些,CSS水平垂直居中再也不怕了

举报
是乃德也是Ned 发表于 2022/09/02 16:01:48 2022/09/02
【摘要】 前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法。 方法一:margin:auto子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种方法。CSS代码: div{ width: 600px; height: 600px; position: relative; border: 1px solid #000...

前言

今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法。

方法一:margin:auto

子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种方法。

CSS代码:

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

HTML代码:

<div>
    <img src="avatar.jpg">
</div>

效果图:

marginauto.png

方法二:flex弹性盒子法

利用flex,align-items:center是控制垂直方向居中,justify-content:center是控制水平方向的居中。

CSS代码:

div{
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
}
img{

}

HTML代码:

<div>
    <img src="avatar.jpg">
</div>

效果图:

marginauto.png

方法三:margin:负数法

margin可以为负数是我在牛客上报了个课之后才学到的,在那之前一直没有试过。

道理其实跟方法一差不多,通过百分比将图片移动到容器中心,再对齐中心点就行了。

要记住margin如果是负数的话就是向该方向移动,例如margin-left:-100px;,就是向左移动100px。它与正常添加margin是撑开正好相反。

还不明白可以去写个小demo就懂啦。

CSS代码:

div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
}

HTML代码:

<div>
    <img src="avatar.jpg">
</div>

效果图:

marginauto.png

方法四:table-cell法

这应该算是很老的方法了吧,我没有这么写过。是在百度上搜索得到的结果,完后尝试写了一下。

有个问题,因为按照理解,我觉得img里不加那个应该也是居中的,但是我加了之后在浏览器调试发现,他向上偏移了一些肉眼大概数不出来的距离,在img里加上之后才消失,不知道为什么,希望有大佬可以告知。

CSS代码:

div{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    border: 1px solid #000000;
}
img{
   vertical-align: middle;
}

HTML代码:

<div>
    <img src="avatar.jpg">
</div>

效果图:

marginauto.png

方法五:translate(-50%,-50%)

translate()函数可以将元素向指定的方向移动,我们可以利用它来做成与方法三相同的事情。

CSS代码:

 div{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
}
img{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%); 
}

HTML代码:

<div>
    <img src="avatar.jpg">
</div>

效果图:

marginauto.png

最后

说一下我自己的感受吧,这一共是五种方法,我用过1、2、3、5,其中2和5我用的较多,又以2为最多。

日后如果见到还有别的,也会记录在此的。

点个赞,我们一起学习进步吧♥

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。