css 垂直居中方法汇总
前言
居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法。
实战
这里只讲述css
相关的方法,js
暂时不提,毕竟这是样式上的事情,就不劳烦js
出手了。
1. top 50% ;margin-top:-自身高度/2
记得最早工作的时候学到的第一个方法就是,top
给50%
,然后把自身向上移动自身高度的一半
,具体实现是
<style>
.content{
position:relative;
width:500px;
height:400px;
border:1px solid black;
}
.box{
positon:absolute;
width:200px;
height:200px;
background:orange;
top:50%;
margin-top:-100px;
}
</style>
<div class="content">
<div class="box"></div>
</div>
这样就很容易实现了垂直居中,但这种必须要知道自身的高度,才能使用margin-top:-100px
这种来达到目的。
优点: 写法简单,兼容性好
缺点: 必须知道目标元素的高度,而且高度必须是固定的值,否则样式要跟着相应的改动,不够灵活
2. top 50% ; transforms:translateY(-50%)
这个方法和上述原理一致,只不过向上位移换成了transforms:translateY
写法
.box{
positon:absolute;
width:200px;
height:200px;
background:orange;
top:50%;
transforms:translateY(-50%)
}
由于用到了css3的新特性,所以对浏览器的要求就比较高了
优点: 写法简单,适应性好
缺点: 兼容性一般,不支持ie8浏览器
3. margin:auto
大家平时可能都用过margin:0 auto
来实现一个div
水平居中吧,其实也是可以做垂直居中的。
.box{
positon:absolute;
width:200px;
height:200px; /**必须要指明宽高**/
background:orange;
top:0;
bottom:0;
margin:auto
}
是不是很神奇?但是有个地方要注意的是,这个必须要指明宽高,不然的话top:0;bottom:0
就把容器撑满了。
优点: 写法简单,适应性好,兼容性好
缺点: 需要指明元素宽高,如果目标元素宽高是变化的,你可以通过js
来辅助生成
4. vertical-align:middle
这个方法是我最喜欢用的一个方法,基本满足上述的全部要求,主要用到了多个元素vertical-align:middle
实现垂直居中,由于需要多个元素才能生效(不然一个元素跟谁对齐呢),所以再添加一个i
标签
<style>
.box{
display:inline-block;/**必须是inline-block类型**/
width:200px;
height:200px;
background:orange;
vertical-align:middle;
}
.m{
display:inline-block;/**必须是inline-block类型**/
width:0;
height:100%;
vertical-align:middle;
}
</style>
<div class="content">
<i class="m"></i>
<div class="box"></div>
</div>
这样就实现垂直居中,而且不需要关注目标元素的尺寸,适应性强
通常我在用的时候用用一个伪元素来代替,避免在html
中新增结构
<style>
/**单独用一个类名表示,可作为公共样式**/
.mfix{
font-size:0;/**消除空隙**/
}
.mfix:before{
content:'';
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
.mfix>*{
display:inline-block;
vertical-align:middle;
}
.box{
width:200px;
height:200px;
background:orange;
vertical-align:middle;
}
</style>
<div class="content mfix"> <!--添加一个mfix类名-->
<div class="box"></div>
</div>
这样在需要垂直居中的父级上添加一个.mfix
就可以实现垂直居中了。
优点: 适应性好,兼容性好
缺点: 可能稍微有点复杂吧。
5. writing-mode
这个方法是在张鑫旭的博客中发现的,也挺有意思。
正常情况下比如text-align:center
,inline-block
元素可以实现水平居中,假设我们通过writing-mode
将水平流改成竖直流,不就形成垂直居中了吗?
在父级上加上如下样式
.content{
writing-mode: tb-rl; /**内容从上往下(top-bottom),从右往左(right-left)垂直流动,下面是一些兼容性写法**/
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-align: center;
}
这样也可以做到垂直居中,不过要注意的是,现在里面的文本也会变成从上到下排列,所以需要重置一下。
还有一个问题就是,如果这个时候要想水平居中就gg了,原理和刚才反过来,可以通过套一层改变流向来解决,具体实现可以参考demo
优点: 适应性好,兼容性好
缺点: 算是一个偏方吧。而且writing-mode
的语法太杂,各种各样的,所以。。玩玩就好
6. flex大法
这个方法接触过css3
的应该都接触过吧,只要在父级加上如下代码就能实现垂直居中了
.content{
display:flex;
justify-content: center;
align-items: center;
}
如果对浏览器没什么要求,尽量都用这种方式吧。
优点: 写法简单,适应性好
缺点: 兼容性一般,不支持ie8浏览器
小节
以上共有6种方式来实现垂直居中的效果,个人是最青睐第4种方式的,兼容性好,适应性好,各位小伙伴还有没有其他的实现方式呢?