<!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. 01_3Java Application初步

    01_3Java Application初步 l Java源文件以“java”为扩展名.源文件的基本组成部分是类(class),如本例中的HelloWorld类. l 一个源文件中最多只有一个publ ...

  2. CocoaPods在OS X Yosemite上突然不能用了的解决办法

    最近开发的时候发现自己的CocoaPods不能使用了! 根据报的错误上网搜寻answer,于是搜到了解决办法 在 OS X Yosemite 报这样的错: [MT] DVTAssertions: AS ...

  3. Goroutines和Channels

    原文链接 https://golangbot.com/goroutines/ Goroutines Goroutines 可以被认为是多个函数或方法同时允许.可以认为是一个轻量级的线程.与线程的花费相 ...

  4. Linux系统入门-Bash初识

    目录 Linux系统入门-Bash初识 Bash Shell介绍 Bash Shell的作用 Bash的两种使用方式 命令提示符 shell的基础语法 shell的基本特性 命令补全 linux快捷键 ...

  5. Python基础-os模块 sys模块

    sys模块 与操作系统交互的一个接口 文件夹相关 os.makedirs('dirname1/dirname2')    可生成多层递归目录 os.removedirs('dirname1')    ...

  6. cmake命令 安装、用法简介

    前言 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品.后来经过发展,最终形成体系,在2001年成为一个独立的开放源代码项目.其官方网站是www.cm ...

  7. Divisibility by 25 CodeForces - 988E

    You are given an integer nn from 11 to 10181018 without leading zeroes. In one move you can swap any ...

  8. zoj 4054

    #define ll long long ; int t; ll ans,tmp; char s[N]; int main() { scanf("%d",&t); whil ...

  9. RSS列表

    博客园 http://feed.cnblogs.com/blog/sitehome/rss

  10. NO_PUBKEY

    * 现象:$ sudo apt-get update时警告如下: W: GPG error: http://ppa.launchpad.net precise Release: The followi ...