<!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. Bootstrap 页面标题(Page Header)

    Bootstrap页面标题(PageHeader)是个不错功能,它会网页的标题的四周添加适当的间距,当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距,使用页面标题是非常有用的.如果需要使用 ...

  2. HTML5语义

    语义通俗化为意义,也就是语义化的元素等于意义化的元素,看到这个元素的名称,就知道这个元素的意义,是拿来做什么用的,这就是HTML5的一个新特性,一个具有语义化的元素能够清楚的把元素的意义告诉浏览器和开 ...

  3. maven,gradle本地缓存位置

    gradle: 配置系统环境变量GRADLE_USER_HOME即可,值为缓存位置. maven: 修改settings文件:maven的home路径下的conf文件夹下的settings.xml 对 ...

  4. python并发编程之进程2(管道,事件,信号量,进程池)

    管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...

  5. 二叉排序树：HDU3791-二叉搜索树（用指针建立二叉排序树）

    二叉搜索树 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Descr ...

  6. 第十四届华中科技大学程序设计竞赛决赛同步赛 Beautiful Land

    It’s universally acknowledged that there’re innumerable trees in the campus of HUST.Now HUST got a b ...

  7. THUSC2019游记

    Day 0 完全没有明明是最后一次机会的紧张感.大概是滚粗的预兆. 住在西郊.房间好小. 和thupc前一样又有一场cometoj,好像又有小裙子了.upd:改成星空棒棒糖! Day 1 早餐有点棒. ...

  8. dedecms 搬家流程

    进入后台 系统 点击数据备份/还原根据新空间数据库版本格式备份 进入网站根目录备份文件夹data\backupdataimagestempletsuploadsplus 进入新空间 重新安装dede程 ...

  9. 全链路spring cloud sleuth+zipkin

    http://blog.csdn.net/qq_15138455/article/details/72956232 版权声明:@入江之鲸 一.About ZipKin please google 二. ...

  10. 【LeetCode】Binary Tree Level Order Traversal(二叉树的层次遍历)

    这道题是LeetCode里的第102道题. 题目要求: 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15 ...