学会这些,CSS水平垂直居中再也不怕了
前言
今天来看看一个之前困扰我很久的问题,在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>
效果图:
方法二: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>
效果图:
方法三: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>
效果图:
方法四: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>
效果图:
方法五: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>
效果图:
最后
说一下我自己的感受吧,这一共是五种方法,我用过1、2、3、5,其中2和5我用的较多,又以2为最多。
日后如果见到还有别的,也会记录在此的。
点个赞,我们一起学习进步吧♥
- 点赞
- 收藏
- 关注作者
评论(0)