纯CSS如何实现垂直居中的9种方法

互联网
当秋风吹过黄昏，树叶洒落了一地，透过树干间的缝隙，有一抹夕阳，在绽放他最后的美丽……

为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。

方法1：table-cell

html结构：

XML/HTML Code复制内容到剪贴板
  1. <divclass="boxbox1">
  2. <span>垂直居中</span>
  3. </div>

css：

CSS Code复制内容到剪贴板
  1. .box1{
  2. display:table-cell;
  3. vertical-align:middle;
  4. text-align:center;
  5. }


方法2：display:flex

CSS Code复制内容到剪贴板
  1. .box2{
  2. display:flex;
  3. justify-content:center;
  4. align-items:Center;
  5. }

方法3：绝对定位和负边距

CSS Code复制内容到剪贴板
  1. .box3{position:relative;}
  2. .box3span{
  3. position:absolute;
  4. width:100px;
  5. height:50px;
  6. top:50%;
  7. left:50%;
  8. margin-left:-50px;
  9. margin-top:-25px;
  10. text-align:center;
  11. }

方法4：绝对定位和0

CSS Code复制内容到剪贴板
  1. .box4span{
  2. width:50%;
  3. height:50%;
  4. background:#000;
  5. overflow:auto;
  6. margin:auto;
  7. position:absolute;
  8. top:0;left:0;bottombottom:0;rightright:0;
  9. }

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

CSS Code复制内容到剪贴板
  1. .box6span{
  2. position:absolute;
  3. top:50%;
  4. left:50%;
  5. width:100%;
  6. transform:translate(-50%,-50%);
  7. text-align:center;
  8. }

这实际上是方法3的变形，移位是通过translate来实现的。

方法6：display:inline-block

CSS Code复制内容到剪贴板
  1. .box7{
  2. text-align:center;
  3. font-size:0;
  4. }
  5. .box7span{
  6. vertical-align:middle;
  7. display:inline-block;
  8. font-size:16px;
  9. }
  10. .box7:after{
  11. content:'';
  12. width:0;
  13. height:100%;
  14. display:inline-block;
  15. vertical-align:middle;
  16. }

这种方法确实巧妙...通过:after来占位。

方法7：display:flex和margin:auto

CSS Code复制内容到剪贴板
  1. .box8{
  2. display:flex;
  3. text-align:center;
  4. }
  5. .box8span{margin:auto;}

方法8：display:-webkit-box

CSS Code复制内容到剪贴板
  1. .box9{
  2. display:-webkit-box;
  3. -webkit-box-pack:center;
  4. -webkit-box-align:center;
  5. -webkit-box-orient:vertical;
  6. text-align:center
  7. }

css3博大精深，可以实现很多创造性的效果，需要好好研究下。

今天又发现一种方法，现在补上：

方法9：display:-webkit-box

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮动，并显示在中间。

XML/HTML Code复制内容到剪贴板
  1. <divclass="floater"></div>
  2. <divclass="content">Contenthere</div>
CSS Code复制内容到剪贴板
  1. .floater{
  2. float:left;
  3. height:50%;
  4. margin-bottom:-120px;
  5. }
  6. .content{
  7. clear:both;
  8. height:240px;
  9. position:relative;
  10. }

优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/hutuzhu/p/4450850.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例