CSS垂直居中，你会多少种写法？

CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。

谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。

由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。

不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行了简单比较。

一、水平居中

使用CSS控制水平居中很简单：

块级元素设置width,并设置margin auto
内联元素父元素设置text-align center

HTML代码如下:

1、块级元素水平居中


.container {height: 300px;width: 300px;border: 1px solid red;
}.content {width: 10rem;border: 1px solid green;margin: 0 auto;
}

效果：

2、内联元素水平居中


.container {height: 300px;width: 300px;border: 1px solid red;text-align: center;
}.content {display: inline-block;border: 1px solid green;
}

效果：

代码很简单，而且没什么兼容性问题，所以通常也不需要用别的复杂方式来实现水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，这里主要罗列几种。

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】每天更新最新技术文章干货。

1、flex布局

flex布局出现以后，垂直居中就很方便了，直接设置父元素：

display: flex
align-items: center

如果同时要水平居中，则同时设置：justify-content center ，需要注意的是IE10+才支持，webkit前缀浏览器设置flex属性需要加webkit。

.container {width: 300px;height: 300px;border: 1px solid red;display: -webkit-flex;display: flex;// 关键属性align-items: center; // 垂直居中justify-content: center // 水平居中}.content {border: 1px solid green;}

效果：

2、 margin+ position:absolute布局

position: absolute布局的元素，通过设置top/bottom, left/right这两对属性，可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像div在水平方向的默认表现一样!

上文中对于块级元素的水平居中，我们设置宽度然后配合以margin可以实现水平居中。而对于设置了top/bottom,left/right的absolute定位元素，我们设置宽高再配合margin就可以达到水平垂直居中：

.container {width: 300px;height: 300px;position: relative;border: 1px solid red;
}.content {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 200px;height: 100px;margin: auto;border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3、 transform + absolute

absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位；transform是CSS3中非常强大的一个属性，可以接收多个属性值，包括旋转、缩放、平移等多种功能。
这里使用二者配合，先将子元素左上定点定位到父元素中心点，再使用transform将子元素中心点移动到父元素的中心点即可：


.container {width: 300px;height: 300px;position: relative;border: 1px solid red;
}.content {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 1px solid green;
}

效果：

这个方法有个小缺陷，就是translate函数的参数，最后的计算值不能为小数，否则有的浏览器渲染出来效果会模糊，所以使用本方法的话最好设置一下宽高为偶数。

4、absolute+margin负值

与上一种方法很类似，上一种方法是使用transform将元素向左上平移，本方法则是使用margin负值的方式将元素拉向左上角。
代码：

.container {width: 300px;height: 300px;position: relative;border: 1px solid red;
}.content {position: absolute;left: 50%;top: 50%;width: 200px;height: 100px;margin-top: -50px;margin-left: -100px;border: 1px solid green;
}

效果：

5、absolute + calc

从上两种方法可以看到，absolute设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top值，岂不是一次到位？calc函数正有此功能，当然我们需要知道子元素的宽高：


.container {width: 300px;height: 300px;border: 1px solid red;text-align: center;position: relative;
}.content {position: absolute;border: 1px solid green;width: 200px;height: 100px;left: calc(50% - 100px);top: calc(50% - 50px);
}

效果：

6、 line-height + vertical-align

vertical-align是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素“基线对齐”的。

这里的的基线指的是父元素每一行中的一个垂直位置，是英文ｘ下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部（基线+字母ｘ的一半高度）。

所以可以利用这一点，将父元素的行高设置为其自身高度，然后将子元素与父元素中线对齐，即可实现垂直居中。

代码：


.container {width: 300px;height: 300px;border: 1px solid red;line-height: 300px;text-align: center;
}.content {display: inline-block;line-height: 1.5;border: 1px solid green;vertical-align: middle;
}

效果：

以上几种方法各有不同的适用条件，因此也有不同的优缺点，下表对各种方法进行了比较：

CSS中同一种表现效果往往有多种不同的实现方法，要刻意地尝试多种写法，避免熟悉了一两种方法就止步不前，这样才能对各种情况得心应手。

CSS垂直居中，你会多少种写法？相关推荐

CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
css之下划线的几种写法
1.给上面的div设置边框的底部 margin: 15px 30px; border-bottom: 1px solid #dddddd; 2.单独给下划线一个div 设置高度和背景颜色 .li ...
JavaScript的三种写法
1.2-JavaScript的三种写法 1-复习CSS代码的三种写法 1.外联样式:写在css文件中,使用link导入 <link rel="stylesheet" href ...
你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
text文字垂直居中_CSS垂直居中，你会多少种写法？
来源 | https://wintc.top/article/4 CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法.谈及HTML元素居中展示,涉及到水平居中和垂直 ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
CSS——CSS样式的几种写法
CSS概念:Cascading Style Sheet,简称为css,中文名称层叠样式表或者级联样式表,主要指的是用来装饰HTML页面的一种技术. 在页面开发的时候,一般CSS有如下几种写法: --& ...
CSS 垂直居中的七种方法——史上最详细总结
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
CSS垂直居中的10种实现姿势
前言前端开发中元素居中是最常见和最经常使用到的css技巧,不仅开发中经常会用到,面试官出题考核基础时有时候也会问道这类问题.本文主要介绍10种垂直居中的方法.希望对你我都有帮组. 1.line-he ...

CSS垂直居中，你会多少种写法？

CSS垂直居中，你会多少种写法？相关推荐

最新文章

热门文章