<!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. mysql中添加数据时,报错(incorrect string value:'\xf0\x9f ) 字符转换不正确

    这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表情或者某些特殊字符是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去. 在网上搜了一下解决问题的方案,我选了一 ...

  2. 01_2_Servlet简介

    01_2_Servlet简介 1. Servlet简介 Servlet是服务器小应用程序 用来完成B/S架构下,客户端请求的响应处理 平台独立,性能优良,能以线程方式运行 Servlet API为Se ...

  3. NOIP计划索引

    药丸的节奏 亟待解决的问题 灵光一现的trick 2018上学期刷题记录 NOIP2018 - 暑期博客整理 NOIP2018 - 一些板子 NOIP2018 - 每日填坑

  4. 深入理解 hashcode 和 hash 算法

    深入理解 hashcode 和 hash 算法 2017年12月30日 23:06:07 阅读数:5197 标签: hashhashmaphashcode二进制 更多 个人分类: jdk-源码  ht ...

  5. 转 Spring Security 简介

    https://blog.csdn.net/xlecho/article/details/80026527 Spring Security 简介 2018年04月21日 09:53:02 阅读数:13 ...

  6. pandas交叉表和透视表及案例分析

    一.交叉表: 作用: 交叉表是一种用于计算分组频率的特殊透视图,对数据进行汇总 考察预测数据和正式数据的对比情况,一个作为行,一个作为列 案例: 医院预测病人病情: 真实病情如下数组(B:有病,M:没 ...

  7. Angular - Can't bind to 'ngModel' since it isn't a known property of 'input'.

    用[(ngModel)]="xxx"双向绑定,如:控制台报错:Can't bind to 'ngModel' since it isn't a known property of ...

  8. NodeJS基础入门-fs文件系统

    文件I/O是由简单封装的标准POSIX函数提供.通过require('fs') 使用该模块.所有的方法都有异步和同步的形式. 异步方法的最后一个参数都是一个回调函数.传给回调函数的参数取决于具体方法, ...

  9. cf 1017C

    C. The Phone Number time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. poj 1328 安雷达问题 贪心算法

    题意:雷达如何放置?在xoy二维平面坐标系里面,x轴上方的为岛屿,x轴下方的是雷达要放到位置,如何放使得雷达放的最少? 思路 肯定放在x轴上减少浪费是最好的选择 什么情况下,雷达无法到达呢?--以这个 ...