<!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 实现居中的9中方法的更多相关文章

  1. Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法

    1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...

  2. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  3. CSS绝对定位元素居中的几种方法

    转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...

  4. 纯CSS3实现垂直居中的九种方法

    浏览时看到的资料,每个都做了测试,很好,就先收了~ 测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题 ...

  5. 实现DIV居中的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. C#中方法的声明

    C#中方法的声明(四要素) 访问修饰符 :public,private(方法的默认访问修饰符) 返回值类型:void 和 非void 方法名称    : 规范是方法名称取动词,每个单词的首字母大写. ...

  7. C#中方法的参数的四种类型

    C#中方法的参数有四种类型:       1. 值参数类型  (不加任何修饰符,是默认的类型)       2. 引用型参数  (以ref 修饰符声明)       3. 输出型参数  (以out 修 ...

  8. JAVA文件夹导入到Eclipse中方法：

    将JAVA文件夹导入到Eclipse中方法:方法一: 直接将java文件夹复制,然后粘贴到项目下:方法二:1.打开eclipse,点击项目的空白处,选择import:2.选择Existing Proj ...

  9. C#中方法的调用

    C#中方法的调用 1.同一个类中方法的调用: 静态方法可以直接调用静态方法 静态方法不能直接调用非静态方法,静态方法先生成. 非静态方法可以直接调用静态方法 如果静态方法要调用非静态的方法,必须使用实 ...

随机推荐

  1. 因 URL 意外地以“/HelloWorld”结束，请求格式无法识别。

    web.config文件中的 <system.web> 节点下加入:<webServices>    <protocols>        <add name ...

  2. MySQL索引类型及优化

    索引是快速搜索的关键.MySQL索引的建立对于MySQL的高效运行是很重要的.下面介绍几种常见的MySQL索引类型. 在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytabl ...

  3. cocos2d-x的基本动作2

    1.基本动作 Cocos2d提供的基本动作:瞬时动作.延时动作.运作速度. 瞬时动作:就是不需要时间,马上就完成的动作.瞬时动作的共同基类是 InstantAction. Cocos2d提供以下瞬时动 ...

  4. windows10蓝屏page fault in nonpaged area

    Windows系统最让人头疼的问题就是蓝屏了,总是出现得那么莫名其妙,而且造成原因也是千奇百怪的.所以,对于电脑蓝屏,系统迷也无法一次性讲清楚.前天,我的电脑就经历过这样的蓝屏page fault i ...

  5. jenkins执行构建并查看结果

    继完成构建项目配置http://www.cnblogs.com/yajing-zh/p/5111060.html后,则要执行构建. 回到jenkins主页之后,我们看到一个新建的项目显示出来: 点击进 ...

  6. php-数据库连接类

    <?php class DB{ var $host; var $user; var $pwd; var $dbname; var $conn; function DB($host,$user,$ ...

  7. Selenium 报错：Element is not clickable at point

    WebDriverException: unknown error: Element <td class="grid - select - input " stype=&qu ...

  8. js 页面刷新 每N秒钟刷新一次页面

    <!-- 每5秒钟刷新一次页面 -->     <script>setTimeout("location=location; ", 5000); </ ...

  9. 【LeetCode】Longest Common Prefix(最长公共前缀)

    这道题是LeetCode里的第14道题. 题目描述: 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["f ...

  10. [windows篇][关掉某些服务]