查看原文可以有更好的排版效果哦

前言

居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法。

实战

这里只讲述css相关的方法,js暂时不提,毕竟这是样式上的事情,就不劳烦js出手了。

1. top 50% ;margin-top:-自身高度/2

记得最早工作的时候学到的第一个方法就是,top50%,然后把自身向上移动自身高度的一半,具体实现是

<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:centerinline-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种方式的,兼容性好,适应性好,各位小伙伴还有没有其他的实现方式呢?

css 垂直居中方法汇总的更多相关文章

  1. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  3. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  4. css垂直居中方法总结

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...

  5. css垂直居中方法(四)

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  6. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  7. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  8. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  9. css垂直居中方法(二)

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

随机推荐

  1. 抛弃模板,一种Prompt Learning用于命名实体识别任务的新范式

    原创作者 | 王翔 论文名称: Template-free Prompt Tuning for Few-shot NER 文献链接: https://arxiv.org/abs/2109.13532 ...

  2. Qt:打包成可执行文件(exe文件)后出现Driver not Loaded的解决方法

    问题 在当前电脑上打包为exe可以正常执行,发送给另一台电脑后却无法执行,并且出现"Driver not loaded"的提示框. 可能原因 1.另一台电脑上没有MySQL(或ex ...

  3. Leaflet:Path、Polyline、Polygon、Rectangle、Circle、CircleMarker

    下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...

  4. (第一章第一部分)TensorFlow框架介绍

    接下来会更新一系列博客,介绍TensorFlow的入门使用,尽可能详细. 本文概述: 说明TensorFlow的数据流图结构 1.数据流图介绍  TensorFlow是一个采用数据流图(data fl ...

  5. tp 5 三级联动查询(自写)

    思路: 1.定义路由 2.查询顶级分类(pid=0)发送至制图 3.循环展示 4.给顶级分类下拉框绑定内容改变事件(JS:onchange.JQ:change) 5.获取到选中的option的valu ...

  6. elasticsearch高亮之词项向量

    一.什么是词项向量 词项向量(term vector)是有elasticsearch在index document的时候产生,其包含对document解析过程中产生的分词的一些信息,例如分词在字段值中 ...

  7. UOJ191口胡

    UOJ191,你失败的原因只有一个:你没有强制在线. 首先这个序列末位加加减减很烦,于是换成操作树,这样就变成查询链的信息了. 注意到一个向量 \((x_1,y_1)\) 比 \((x_2,y_2)\ ...

  8. 4月11日 python学习总结 对象与类

    1.类的定义 #类的定义 class 类名: 属性='xxx' def __init__(self): self.name='enon' self.age=18 def other_func: pas ...

  9. 《手把手教你》系列基础篇(八十一)-java+ selenium自动化测试-框架设计基础-TestNG如何暂停执行一些case(详解教程)

    1.简介 在实际测试过程中,我们经常会遇到这样的情况,开发由于某些原因导致一些模块进度延后,而你的自动化测试脚本已经提前完成,这样就会有部分模块测试,有部分模块不能进行测试.这就需要我们暂时不让一些t ...

  10. 如何巧妙使用vim处理文件

    一系列流程书写如何用vim巧妙处理文件 1. 创建两个待处理的文件 root@ubuntu:/home/watson/real-watson# touch left right 2. 简单增补文件内容 ...