CSS 垂直居中 - 寸寸君_H5之家 - 中国HTML5教程资源分享第一站

CSS 垂直居中

欢迎大家先来看看我的水平居中篇：

首先要清楚一个问题，什么时候你会要设置垂直居中？大家不要被各种例子弄晕头，静下心来想一想！
一个父元素，如果不设置高度的话，默认就是紧包着子元素，如果你的padding-top和padding-bottom是相等，那么这本身就是一个垂直居中的效果！！！！！

当然，如果你的子元素并不独占一行，而是行内元素和inline-block元素的话就不一样了。比如下面这个例子：

<div> <span>aaaaaaaaaaaa我我我</span> <img src="1.jpg"/><img src="1.jpg"/> </div>

这涉及到一个知识点，就是line-box原理。详情可见张鑫旭老师的博客： %E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

inline和inline-block都是在一行显示，如图所示由于图片本身有高度，就会把整个行高撑大，但是文字和图片依然在一行。
相信细心地朋友会发现，图片下面有一条小空白。这就涉及到了vertical-align属性，张鑫旭老师的博客写的很详细。在这里我给大家简单总结一下。
vertical-align只对inline-block元素有效，换句话，inline-block 自带vertical-align属性。属性的值有很多，主要有下图这几种：

Vertical-align默认值是baseline！即使你没有设置这个属性，也会有。所以图片是和整个line-box的baseline对齐，所以下面会有空白。

言归正传：这种情况下，谁想居中谁就自己设Vertical-align：middle；当然只对line-block有效！比如我对两个图片设置垂直居中，

#container{ border:2px solid blue; } img{ vertical-align:middle ; }

效果如图所示，很多人可能会问，怎么文字也居中了呢？
答：其实不是文字居中，而是图片相对整个行居中，也就是文字所在的行居中，图片下移，这个时候上方被图片撑起来的line-height变矮了，所以整个行都上移，直到最高的图片碰到父元素的border。只不过视觉效果上是文字也居中了。

再然后，就是父元素设置了height，子元素如何垂直居中？
记住一点vertical-heigh只是针对inline-block有效，并且仅仅是相对元素所在line-box垂直居中！！也就是说只能在一行中折腾！

#container{ border:2px solid blue; height:250px; } img{ display:inline-block; vertical-align:middle ; }

我给父元素设置了高度，会发现图片仍然只在自己的那行居中，并不在整个父元素居中。
就算是块状元素设置display：inline-block，也是只在自己那一行居中！
所以这种情况，vertical-align就排不上用场了，当然还是有居中的办法，具体见下文喽！！

1.line-height（适用单行文本)

height: 该元素的高度，line-height: 指在文本中，行与行之间的基线间的距离。
设置line-height，比font-size大就行了。height不设就行，默认是line-height的高，非得设值的话，就height=line-height即可。

<div> hi,imooc! </div> <style> .container{ /*height:100px;*/ line-height:100px; } </style>

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

2.适用于父元素有自己的的height，自己是块状元素的情况（最常用）

a. 负外边距:设置元素为absolute/relative/fixed，（1）偏移量（top或者bottom）设置为50%，（2）margin设置为元素宽度一半乘以-1。
如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：
通过absolute设置top: 50%; left: 50%;外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半。

<div> <div>kkkkkkk</div> </div> #a{ border: solid blue; width:800px; height:300px; position: relative; margin:50px; padding:40px; } #b { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; margin-top: -120px; /* height/2 + padding */ }

注意此时absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是视图居中，50%是可视窗口的50%，所以适用如果想要在浏览器居中。

b. position:absolute/fixed + top,bottom:0 + margin:auto

<div> <div>看我是否可以居中。</div> </div> #a{ border: solid blue; width:800px; height:350px; margin:50px; padding:40px; position: relative; } #b { width: 300px; height: 100px; padding: 20px; border: 1px solid red; position:absolute; top:0; bottom: 0; margin:auto 0; }

和水平居中是一个原理，如果被居中的元素没有设置height的话，content就会被扯大，充满父元素。
position：relative就失效了，因为他和父元素没有关系而是相对原来的位置偏移，上下设置top bottom：0是没有变化的。
fixed可以实现居中，只不过不是相对父元素而是可视窗口。

3.父元素height随意，自己是行内、块状都适用