让一个块级元素垂直居中的八种方法

让一个块级元素垂直居中的八种方法

前言

• 今天有个web前端的面试，公司挺大的，全国各地还都有分支机构，估计是因为最近缺人吧，所以我非常幸运的通过了简历筛选。但是过程有点。。。因为面试官问我的很多基础的问题我都半懂不懂的，主要还是基础没打牢，唉，感觉受到了一万点暴击，又错过了一个亿！！！
• 题目就是面试官问我的其中一个问题，很搞笑的是，在上个月我同桌还问过我这个问题，我当时只知道一种方法，还专门去搜了一下，结果今天还是只答出了一种方法。接下来还是把这些方法记录一下吧，希望可以加深记忆，也希望可以帮助到有需要的朋友们。

正题

第一种方法

• 利用弹性布局实现，在父容器中添加display: flex;align-items: center;
• 首先解释一下flex布局，Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
• 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
• 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 浏览器的支持如下：
  
  代码附上：

效果图：（图片的水印是系统自动加上的吗？）

第二种方法

设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。IE版本都可以兼容，代码如下：

效果图：

第三种方法

和上一种方法原理差不多，都是利用相对定位和绝对定位，有点不同是子元素内加上了transform: translateY(-50%);和margin-top: -50px;作用差不多，话不多说，上代码：

上图：

第四种方法

这种方法和上一种相似，这是利用相对定位，在子元素中设置position: relative;top: 50%;transform: translateY(-50%);先相对自身向下平移父元素的50%，再。。。你们懂的。
代码：

图：（虽然这些图都是一毛一样。。。）

第五种方法

• 这种方法和第一种差不多，在父容器中设置display:flex;子元素设置align-self: center;
• align-self属性：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
• 效果图：（我是占位置的哈哈）
  

第六种方法

这是一种障眼法，在父容器中再加上一个子元素，把它的高度设为去掉盒子高度后的一半，实际上就是设置了一个隐藏块元素，把实际上显示的块元素“挤”到垂直居中的位置。看代码：

还是看图吧：

第七种方法

设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中，看代码：

看图：

如果只实现垂直居中，则只设置top,bottom值为0，看代码：

.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
			}

如果要实现水平居中当然是只设置right,left为0就好啦。

第八种方法

设置父容器为display: table-cell;vertical-align: middle;注意：不能将display:inline-block;替代display:table-cell;具体代码如下：

注

• 有些朋友可能会说可以设置line-height为父元素的高实现垂直居中，但是，划重点！！！ 这种方法只适用于子元素为单行文本的情况！！！ 记住不要搞错了。
• 还有一个vertical-align: middle;这个适用于行内元素的垂直居中，块元素不可以。

最后

差不多就是这些，参考的网上的一些博客，取舍了一些，自己动手试了一下，有些实现不了，就没有整理出来，如果以后还发现新的方法再整理出来。发现一个问题就是很多东西学过，也知道，但真正叫你描述出来或者问你的时候，真的就懵了，所以解决方法还是多练习吧，希望每天都有进步。
最后整理不易，期待亲们的赞。