css 垂直居中方法汇总

CarterLi 发布于2019-08-29 16:41 / 2751人阅读

摘要：优点写法简单，适应性好缺点兼容性一般，不支持浏览器小节以上共有种方式来实现垂直居中的效果，个人是最青睐第种方式的，兼容性好，适应性好，各位小伙伴还有没有其他的实现方式呢

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

前言

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

实战

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

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

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

这样就很容易实现了垂直居中，但这种必须要知道自身的高度，才能使用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标签

这样就实现垂直居中，而且不需要关注目标元素的尺寸，适应性强

通常我在用的时候用用一个伪元素来代替，避免在html中新增结构

这样在需要垂直居中的父级上添加一个.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种方式的，兼容性好，适应性好，各位小伙伴还有没有其他的实现方式呢？

超融合服务器混合云垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113906.html

CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

loonggg 2019-08-29 12:15 评论0 收藏0
CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

Cympros 2019-08-05 10:58 评论0 收藏0
css-元素居中

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中 1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 评论0 收藏0
前端面试汇总(html+css)

摘要：前端页面有哪三层组成分别是什么有什么作用前端页面由结构层，表示层，行为层组成。作用标准模式与兼容模式有什么区别声明位于文档的第一行，处于标签之前，告知浏览器的解析器用什么文档标准解析这个文档，不存在或者格式不正确会导致文档以兼容模式存在。 HTML: 1、前端页面有哪三层组成？分别是什么？有什么作用？前端页面由结构层HTML，表示层CSS，行为层JS组成。 2、HTML5为什么只用...

wangjuntytl 2019-08-02 15:27 评论0 收藏0
前端面试汇总(html+css)

摘要：前端页面有哪三层组成分别是什么有什么作用前端页面由结构层，表示层，行为层组成。作用标准模式与兼容模式有什么区别声明位于文档的第一行，处于标签之前，告知浏览器的解析器用什么文档标准解析这个文档，不存在或者格式不正确会导致文档以兼容模式存在。 HTML: 1、前端页面有哪三层组成？分别是什么？有什么作用？前端页面由结构层HTML，表示层CSS，行为层JS组成。 2、HTML5为什么只用...

Carbs 2019-08-30 11:18 评论0 收藏0