你的位置:首页 > 网页设计

[网页设计]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;    }

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

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