CSS垂直居中指南

大概整理下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;
        }

liuestc

CSS垂直居中指南

大概整理下css中的垂直居中问题

主要分两大类

1 知道块元素尺寸，一般就是指知道元素高度。

方法一：最简单的，类比水平居中。

思路：子元素设置为absolute;  top bottom都设置为0 ； margin：auto;这样就行啦；

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

方法二：同样设置子元素绝对定位，让其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;
}