浏览时看到的资料，每个都做了测试，很好，就先收了~

测试的是谷歌浏览器，没有任何问题，用360，IE11,火狐，搜狗浏览器做测试时，第五个方法在360，搜狗，和IE11有点问题，第七个在IE11有问题，第8个在IE11，火狐有问题。保险起见，使用前四个好，出现的问题需要再解决。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>CSS3实现垂直居中的方法</title>

     <style>

         .box{

             width: 500px;

             height: 250px;

             border: 1px solid #000000;

         }

         .box1{

             display: table-cell;

             vertical-align: middle;

             text-align: center;

             background-color: #A0A0A0;

         }

         span{

             background-color: #e23a6e;

             font-size: 18px;

             font-weight: 500;

         }

         .box2{

             display: flex;

             justify-content: center;

             align-items: center;

             text-align: center;

             background-color: #A44849;

         }

         .box3{

             position: relative;

         }

         .box3 span{

             position: absolute;

             width: 300px;

             height: 60px;

             top: 50%;

             left: 50%;

             margin-left: -150px;

             margin-top: -30px;

             background-color: #F5AA51;

             text-align: center;

             border: 1px solid #000000;

         }

         .box4{

             position: relative;

         }

         .box4 span{

             width: 50%;

             height: 50%;

             border: 1px solid blue;

             margin: auto;

             overflow: auto;

             position: absolute;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             background-color:#00ff00;

         }

         .box5{

             position: relative;

         }

         .box5 span{

             position: absolute;

             top: 50%;

             left: 50%;

             width: 100%;

             transform: translate(-50%,-50%);

             text-align: center;

             border: 1px solid black;

             background-color: #fa96b5;

         }

         .box6{

          text-align: center;

             font-size: 0;

         }

         .box6 span{

             vertical-align:middle ;

             display: inline-block;

             font-size: 16px;

             background-color: #ffff00;

         }

         .box6:after{

             content: '';

             width: 0;

             height: 100%;

             display:inline-block;

             vertical-align:middle;

         }

         .box7{

             display: flex;

             text-align: center;

         }

         .box7 span{

             margin: auto;

             background-color: antiquewhite;

         }

         .box8{

             display: -webkit-box;

             display: -webkit-box;

             -webkit-box-pack:center;

             -webkit-box-align:center;

             -webkit-box-orient: vertical;

             text-align: center

         }

         .floater {

             float:left;

             height:50%;

             margin-bottom:-25px;

         }

         .content {

             border: 1px solid blue;

             clear:both;

             height:50px;

             position:relative;

             background-color: aqua;

         }

     </style>

 </head>

 <body>

 <div class="box box1"><span>方法一：方法1：table-cell.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box2"><span>方法二：方法2：display:flex.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box3"><span>方法三：方法3：绝对定位和负边距.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box4"><span>方法四：方法4：绝对定位和0 .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box5"><span>方法五：方法5：translate .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box6"><span>方法六：方法6：display:inline-block .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box7"><span>方法七：方法7：display:flex和margin:auto .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box box8"><span>方法八：方法8：display:-webkit-box  .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>

 <div class="box">

     <div class="floater"></div>

     <div class="content">方法九：display:-webkit-box .纯CSS3实现垂直居中，哈哈哈，我居中了 </div>

 </div>

 </body>

 </html>

纯css3实现居中

下面的时测试结果图

纯CSS3实现垂直居中的九种方法的更多相关文章

  1. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

  2. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  3. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  4. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  5. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  6. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  7. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  8. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  9. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

随机推荐

  1. GDI+ 库

    uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winapi.GDIPUTIL}; procedure TForm1.FormPaint(Sender: TObject); ...

  2. Python实例讲解 -- wxpython 基本的控件 （按钮）

    使用按钮工作 在wxPython 中有很多不同类型的按钮.这一节,我们将讨论文本按钮.位图按钮.开关按钮(toggle buttons )和通用(generic )按钮. 如何生成一个按钮? 在第一部 ...

  3. servet概述

    1定义 Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 使用 Servl ...

  4. dom响应事件

    DOMsubtreeModified.DOMNodeInserted.DOMNodeRemoved.DOMAttrModified.DOMCharacterDataModified 当底层DOM结构发 ...

  5. LeetCode——10. Regular Expression Matching

    一.题目链接:https://leetcode.com/problems/regular-expression-matching/ 二.题目大意: 实现一个正则表达式,该正则表达式只有两种特殊的字符— ...

  6. [Java]JGit用法总结

    clone public static void gitClone(String remoteUrl, File repoDir) { try { Git git = Git.cloneReposit ...

  7. HTTP请求报文

    一个HTTP请求报文,有请求行request line.请求头部header.空行和请求数据组成.看下图可知: 1.请求行 请求行:请求方法.请求地址和协议版本. 请求方法 HTTP/1.1 定义的请 ...

  8. 服务容错保护断路器Hystrix之八：Hystrix资源隔离策略

    在一个基于微服务的应用程序中,您通常需要调用多个微服务完成一个特定任务.不使用舱壁模式,这些调用默认是使用相同的线程来执行调用的,这些线程Java容器为处理所有请求预留的.在高服务器请求的情况下,一个 ...

  9. spring4.0之一：简介

    我们共同来构建更好的企业应用.Spring帮助全世界的开发团队构建简单.便携.快速和灵活的基于JVM的系统和应用.这两句话已经足以说明Spring的目标,它针对的领域是企业应用,这套框架构建的应用有着 ...

  10. 配置允许匿名用户登录访问vsftpd服务，进行文档的上传下载、文档的新建删除等操作

    centos7环境下 临时关闭防火墙 #systemctl stop firewalld 临时关闭selinux #setenforce 0 安装ftp服务 #yum install vsftpd - ...