CSS垂直居中指南_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS垂直居中指南_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:34:04

Original

1151 people have browsed it

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

Copy after login

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

Copy after login

方法三：增加一个多余子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;}

Copy after login

方法四：父元素设置为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;}

Copy after login

方法五：也算黑科技了，用幽灵元素撑开

具体方法：

<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;}

Copy after login

当然最后还有几种未提及的，比如Flex布局，这个很简单，还有padding:10p 0; line-heights=height;