大概整理下css中的垂直居中问题
主要分两大类
1 知道块元素尺寸，一般就是指知道元素高度。
方法一：最简单的，类比水平居中。
思路：子元素设置为absolute; top bottom都设置为0 ； margin：auto;这样就行啦；
<div class="lev1">我是第一层
<div class="lev2">我是第二层
</div>
</div> /*CSS*/
.lev1{
width:200px;
height:200px;
background-color: #008BCD;
border: 1px solid #1874CD;
position: relative;
} .lev2{
background-color: #C078CD;
border: 1px solid #B800CD;
width:100px;
height:100px;
position: absolute;
top: 0;
bottom: 0;
margin:auto;
}
CSS垂直居中指南
大概整理下css中的垂直居中问题
主要分两大类
1 知道块元素尺寸，一般就是指知道元素高度。
方法一：最简单的，类比水平居中。
思路：子元素设置为absolute; top bottom都设置为0 ； margin：auto;这样就行啦；
方法二：同样设置子元素绝对定位，让其margin-top：-height/2; top:50%;
思路：同样是绝对定位，理解负margin是要点。多说两句负margin margin 设为负值会使该元素实际高度变矮，映射到HTML上一般表现为被向上拉（margin-top2为负）或者把其他元素拉到上面（margin-bottom为负）。具体的可以参考这篇博客 http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html
最后多说两句：如果并不知道子元素高度 可以transform: translateY(-50%); 是不是很机智！！！
<div class="lev3 lev">我是第一层
<div class="lev4">我是第(absolute margin:-height/2;top:50%)
</div>
</div> /css/
.lev3{
width:200px;
height:200px;
background-color: #008BCD;
border: 1px solid #1874CD;
position: relative;
}
.lev4{
background-color: #C078CD;
border: 1px solid #B800CD;
width:100px;
height:100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
方法三：增加一个多余子div，让其高度等于50%；然后设置其margin-bottom:-height/2;相当于子div把content向上拉了这么多高度
思路：理解负margin是关键。要点 floater要设置的属性（float 为何要设置float 又要清除？ 设置其高度为50%是相对于父元素；margin-top：-height/2 相当于把子元素向上拉这么多距离）
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div> /*CSS*/
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
方法四：父元素设置为table，子元素设置为table-cell vertical-alight:middle;
思路：改变布局属性，优点是其可以布局未知高度元素。顺便复习下vertical-align属性，这个鬼呢，好像深究起来挺复杂，记住最简单的，只对inline 和 inline-block属性有效
传送门 vertical-align 具体理解 http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
div id="parent">
<div id="child">Content here</div>
</div>
/*CSS/ #parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
方法五：也算黑科技了，用幽灵元素撑开
具体方法：
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div> /*CSS/ body {
background: #f06d06;
font-size: 80%;
} div {
background: white;
width: 240px;
height: 200px;
margin: 20px;
color: white;
resize: vertical;
overflow: auto;
padding: 20px;
} .ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 190px;
margin: 0;
padding: 20px;
background: black;
}