垂直居中总结

• 行高法（line-height）：
  如果要垂直居中的只有一行inline元素，只要让其行高（line-height）和容器的高度(height)相同即可，比如：

① 它的父盒子是block.

# HTML:
<div> CSS权威指南 </div>
<p> Python编程：从入门到实践 </p>

# CSS:
div{border:3px solid red;height:100px;line-height:100px;}
p{border:3px solid blue;height:100px;line-height:100px;}



② 如果是inline元素，它没有高度属性可以调整，只有水平居中，只能临时把它{display:inline-block},例如：

<span class="span">
	觀自在菩薩，行深般若波羅蜜多時，照見五蘊皆空，度一切苦厄。
</span>

# CSS:
span{height:100px;line-height:100px;outline:3px solid red;display: inline-block;}



PS.line-height方法只适用于非换行元素(即一行文字)，若超过一行/换行，则失效（垂直居中的只有第一行）。

---

• 内边距（padding）法:原理就是利用padding将内容垂直居中。

# HTML:
<div> div.border.padding </div>
<p> p.outline.padding </p>

# CSS:
div{border:3px solid red;padding:40px 0;}
p{outline:3px solid green;padding:40px 0;}



• 模拟表格法:将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
  实质上起作用的是table-cell,table并无效果。利用table-cell可以定义内部元素水平/垂直对齐的性质以达到目的。

# HTML:
<div class="container">
	<div class="div1">测试垂直居中效果测试垂直居中效果</div>
</div>

# CSS:
.container {
			 300px;
			height: 300px;
			border: 3px solid;
			text-align: center;
			vertical-align: middle;
			display: table-cell;  /* 将父盒子设置为table-cell，相当于table的td。*/
	       }
			
.div1 {
		 100px;
		height: 100px;
		border: 3px solid red;
		background-color: yellow;
		display: inline-block;    /* 此句对垂直居中无影响，是为了将目标div水平居中而设置。*/
       }



table-cell内部元素是一个整体，居中也是整体居中。

#CSS：
.container {
	       300px;
		  height: 500px;
   	      border: 5px solid red;
		  display: table-cell;
		  vertical-align: middle;
		  text-align: center;
	      }
			
.div1 {
		 100px;
		height: 100px;
		border: 5px solid blue;
		display: inline-block;
		}
			
.p1 {
	outline: 5px solid green
	}
	
# HTML：
<div class="container">
	<div class="div1"> div </div>
	<p class="p1"> This is a paragraph </p>
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1278361/profile/profile-80.jpg?100000" alt="">
</div>


PS.table-cell还有很多有趣的用法，待述。

---

• transform法:很简单，只需给要居中的目标元素写入如下样式。

position:relative; #若使用absolute须给父框+ position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
/* 缺点：可能干扰其他 transform 效果。*/

---

• 绝对定位与负边距法：利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

# CSS:
.container {
			border: 3px solid red;
			 300px;
			height: 300px;
			position: relative;
			}
			
.div1 {
	   border: 3px solid green;
	    100px;
	   height: 100px;
	   position: absolute;
	   top: 50%;    /* 父框height*50% */
	   left: 50%;  /* 父框width*50% */
	   margin: -50px 0 0 -50px;   
	   }
# HTML:
<div class="container">
	<div class="div1">div1</div>
</div>

PS. 其实'绝对定位与负边距法'与'transform法'原理是一样的，只是使用的属性不同。

---

• 伪元素法：

.container::after{
    content:'';
    height:100%;
}
.container::after, .son{
    display:inline-block;
    vertical-align:middle;
}

优点：适合所有浏览器。

---

• Flexbox法：

# HTML:
<div class="container">
	<div class="div1">codepen.io</div>
</div>

# CSS:
.container {
			 300px;
			height: 300px;
			border: 3px solid red;
			margin: 20px auto;
			padding: 10px;
			display: -webkit-box;
			-webkit-box-orient: horizontal;
			-webkit-box-pack: center;
			-webkit-box-align: center;
			}
			
.div1 {
	    100px;
	   height: 100px;
	   border: 3px solid green;
	   line-height: 100px;
	   text-align: center;
	   }



PS. Flex是CSS3中一大类新语法，需要另附章节。

---

[附录.CSS3中新加入Flex方法：]

• Flex (2012版)

.container {
            display: flex;
            align-items: center;
            }
/* 父盒子使用此设置，子元素无须任何属性即可实现垂直居中 */

优点：内容块的宽高任意。
缺点：IE8/IE9不支持/需浏览器厂商前缀。

• flex （2009版.）

.container {
            display: box;
            box-orient: vertical;
            box-pack: center;
            }

缺点：不支持IE