<!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. Bzoj 1131[POI2008]STA-Station (树形DP)

    Bzoj 1131[POI2008]STA-Station (树形DP) 状态: 设\(f[i]\)为以\(i\)为根的深度之和,然后考虑从他父亲转移. 发现儿子的深度及其自己的深度\(-1\) 其余 ...

  2. iPhone如何设置自定义铃声？无需连接电脑，轻松几步就搞定！

    转载自: https://baijiahao.baidu.com/s?id=1594988016778457969&wfr=spider&for=pc 受够了iPhone自带的千篇一律 ...

  3. 重写laravel 异常抛出处理

    所有异常错误都由类App\Exceptions\Handler处理,该类包含两个方法:report和render. 这里我们只看render方法,该方法会将异常渲染到HTTP响应中,就是说上面的错误信 ...

  4. hdu 4565

    Problem Description A sequence Sn is defined as:Where a, b, n, m are positive integers.┌x┐is the cei ...

  5. JAVA、JDK等入门概念，下载安装JAVA并配置环境变量

    一.概念 Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言,具体介绍可查阅百度JAVA百科,这里不再赘述. Java分为三个体系,分别为: Java SE(J2SE,Java2 Platf ...

  6. JavaSE——final修饰符

    一.final 修饰变量,被final修饰的变量在被赋初始值之后,不能对它重新赋值 修饰实例变量,必须显示指定初始值,可以在三个位置指定初始值:         1.定义final实例变量时指定初始值 ...

  7. 【Jenkins】Jenkins的安装与配置

    一.环境准备 1.下载jdk 官方下载地址:http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133 ...

  8. 关于freetype在安装中的遇到的问题

    本人电脑配置的是Anconda环境+pycharm2017.2.2 comuniity,每次安装什么包就是直接pip install 的,但是这次在安装freetype的安装中却遇到了麻烦. 具体是在 ...

  9. Java学习笔记1---JVM、JRE、JDK

    jdk包含jre,jre包含jvm. 用java语言进行开发时,必须先装jdk: 只运行java程序,不进行开发时,可以只装jre. JVM 即Java Virtual machine,Java虚拟机 ...

  10. python-高级编程-03

    [多进程与多线程] 调度 : 在传统计算机操作系统中 cpu的调度的基本单位是进程,随着线程的引入,线程变成操作系统的最小调度单位 而进程是作为资源的拥有单位. 并行:由于线程的引入 原先一个进程只能 ...