css垂直居中

来至网络

1.使用绝对定位负边距居中

这个方法兼容性不错,缺点必须提前知道被居中快元素的高度,

2.使用绝对定位+负边距+transform

这个方法有个明显好久就是不必知道被居中元素的尺寸,应为transform中的translate偏移的百分比就是相对于元素自身的尺寸

3. 另外一种使用绝对定位和负外边距进行垂直居中的方式

这种方式的原理实质上和前面两种相同,补充一点,margin的取值也可以是百分比,这时这个值规定该元素的尺寸基于父元素尺寸的百分比

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

position:absolute 中的 left right 百分比 基于父元素的宽度

position:absolute 中的 top bottom 百分比 基于父元素的高度

这种有问题,需要去计算position的上下偏移量和margin的上下偏移量相等      

4.绝对定位结合 margin auto

这种实现方式:垂直居中的元素相对于父元素绝对定位,top 和bottom 设置为相等的值,这里设置为0,,只要相等就行,这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。

被居中元素的宽高可以不设置,但是必须是图片这种自身就包含尺寸的元素,否则无法实现

5.使用padding实现元素的垂直居中

这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的

6.使用padding+box-sizing实现元素的垂直居中

和上面这种类似 只是 父元素可以设置高度,子元素继承 父元素

7.设置第三方基准

这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中

8.使用flex 布局

align-items:cneter

9.flex 第二种 direction column 纵向排列 和justify-content center 

　这种方式也是首先给父元素设置display:flex，设置好之后改变主轴的方向flex-direction: column，该属性可能的取值有四个，分别如下：

　　row（该值为默认值）：主轴为水平方向，起点在左端；

　　row-reverse：主轴为水平方向，起点在右端；

　　column：主轴为垂直方向，起点在上沿；

　　column-reverse：主轴为垂直方向，起点在下沿。

　　justify-content属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（不过具体的对齐方式与主轴的方向有关，以下的值都是假设主轴为从左到右的）：

　　flex-start（该值是默认值）：左对齐；

　　flex-end：右对齐；

　　center：居中对齐；

　　space-between：两端对齐，各个项目之间的间隔均相等；

　　space-around：各个项目两侧的间隔相等。

10. 还有一种在前面已经见到过很多次的方式就是使用 line-height 对单行文本进行垂直居中

这里有一个小坑:line-height (行高)的值不能设置为100%我们来看看官方文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以大家就明白了，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。

11. 使用 line-height 和 vertical-align 对图片进行垂直居中

<div id="box"><img src="duncan.jpeg"></div>

#box

{    width: 300px;    height: 300px;    background: #ddd;    line-height: 300px;

}

#box img {    vertical-align: middle;

}

12. 使用 display 和 vertical-align 对容器里的文字进行垂直居中

13.使用vertical-align居中

使用 before 或者 在child 元素前面加一个 元素 设置宽度为0

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

下面我们来看一张图来更好理解垂直对齐主要属性值的表现形式

14 使用display flex 子元素设置margin auto

15.display box

16. 清除浮动

这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。

content 清除浮动，并显示在中间

优点： 

适用于所有浏览器 

没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现