1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>CSS3实现垂直居中的方法</title>
  6.     <style>
  7.         .box{
  8.             width: 500px;
  9.             height: 250px;
  10.             border: 1px solid #000000;
  11.  
  12.         }
  13.         .box1{
  14.             display: table-cell;
  15.             vertical-align: middle;
  16.             text-align: center;
  17.             background-color: #A0A0A0;
  18.         }
  19.         span{
  20.             background-color: #e23a6e;
  21.             font-size: 18px;
  22.             font-weight: 500;
  23.         }
  24.         .box2{
  25.             display: flex;
  26.             justify-content: center;
  27.             align-items: center;
  28.             text-align: center;
  29.             background-color: #A44849;
  30.         }
  31.         .box3{
  32.             position: relative;
  33.         }
  34.         .box3 span{
  35.             position: absolute;
  36.             width: 300px;
  37.             height: 60px;
  38.             top: 50%;
  39.             left: 50%;
  40.             margin-left: -150px;
  41.             margin-top: -30px;
  42.             background-color: #F5AA51;
  43.             text-align: center;
  44.             border: 1px solid #000000;
  45.         }
  46.         .box4{
  47.             position: relative;
  48.         }
  49.         .box4 span{
  50.             width: 50%;
  51.             height: 50%;
  52.             border: 1px solid blue;
  53.             margin: auto;
  54.             overflow: auto;
  55.             position: absolute;
  56.             top: 0;
  57.             left: 0;
  58.             right: 0;
  59.             bottom: 0;
  60.             background-color:#00ff00;
  61.         }
  62.         .box5{
  63.             position: relative;
  64.         }
  65.         .box5 span{
  66.             position: absolute;
  67.             top: 50%;
  68.             left: 50%;
  69.             width: 100%;
  70.             transform: translate(-50%,-50%);
  71.             text-align: center;
  72.             border: 1px solid black;
  73.             background-color: #fa96b5;
  74.         }
  75.         .box6{
  76.          text-align: center;
  77.             font-size: 0;
  78.         }
  79.         .box6 span{
  80.             vertical-align:middle ;
  81.             display: inline-block;
  82.             font-size: 16px;
  83.             background-color: #ffff00;
  84.         }
  85.         .box6:after{
  86.             content: '';
  87.             width: 0;
  88.             height: 100%;
  89.             display:inline-block;
  90.             vertical-align:middle;
  91.         }
  92.         .box7{
  93.             display: flex;
  94.             text-align: center;
  95.         }
  96.         .box7 span{
  97.             margin: auto;
  98.             background-color: antiquewhite;
  99.         }
  100.         .box8{
  101.             display: -webkit-box;
  102.             display: -webkit-box;
  103.             -webkit-box-pack:center;
  104.             -webkit-box-align:center;
  105.             -webkit-box-orient: vertical;
  106.             text-align: center
  107.         }
  108.  
  109.         .floater {
  110.             float:left;
  111.             height:50%;
  112.             margin-bottom:-25px;
  113.  
  114.         }
  115.         .content {
  116.             border: 1px solid blue;
  117.             clear:both;
  118.             height:50px;
  119.             position:relative;
  120.             background-color: aqua;
  121.         }
  122.     </style>
  123. </head>
  124. <body>
  125. <div class="box box1"><span>方法一：方法1：table-cell.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  126. <div class="box box2"><span>方法二：方法2：display:flex.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  127. <div class="box box3"><span>方法三：方法3：绝对定位和负边距.纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  128. <div class="box box4"><span>方法四：方法4：绝对定位和0 .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  129. <div class="box box5"><span>方法五：方法5：translate .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  130. <div class="box box6"><span>方法六：方法6：display:inline-block .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  131. <div class="box box7"><span>方法七：方法7：display:flex和margin:auto .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  132. <div class="box box8"><span>方法八：方法8：display:-webkit-box  .纯CSS3实现垂直居中，哈哈哈，我居中了</span></div>
  133. <div class="box">
  134.     <div class="floater"></div>
  135.     <div class="content">方法九：display:-webkit-box .纯CSS3实现垂直居中，哈哈哈，我居中了 </div>
  136. </div>
  137. </body>
  138. </html>
  139.  
  140. 纯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. linux 安装并且设置环境lua环境变量

    在lua官网下载lua安装包并安装: http://www.lua.org/download.html 解压编译: wget http://www.lua.org/ftp/lua-5.3.2.tar. ...

  2. iOS 绘制1像素的线

    一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到P ...

  3. ARC中__weak;__strong;__unsafe_unretained;修饰词

    测试代码: // Human.h代码 @interface Human : NSObject @property (nonatomic, weak) Cat *pinkCat; @property ( ...

  4. iOS监听电话来电、挂断、拨号等

    以下,来讲解在app内如何调用打电话功能和监听电话来电.挂断.拨号等功能. 简单的UI布局: 首先,先实现拨打电话的功能,以便于后续测试: // 拨打电话 - (IBAction)dialingBut ...

  5. 20180904 定时器setTimeout和setInterval回调问题

    引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...

  6. knn算法之预测数字

    训练算法并对算法的准确值准确率进行估计 #导入相应模块 import numpy as npimport pandas as pdimport matplotlib.pyplot as plt%mat ...

  7. Python中的可迭代对象，迭代器与生成器

    先来看一张概览图,关于容器(container).可迭代对象(Iterable).迭代器(iterator).生成器(generator). 一.容器(container) 容器就是一个用来存储多个元 ...

  8. Do not pour out HDU - 5954 数学积分

    题目:题目链接 思路:纯高等数学问题,不过不是很好积分,具体积分思路及过程参考大佬博客——https://blog.csdn.net/danliwoo/article/details/53002695 ...

  9. 库函数的使用：POJ1488-TEX Quotes（getline()的使用）

    TEX Quotes Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9385 Description TEX is a type ...

  10. HDU 3727 Jewel 主席树

    题意: 一开始有一个空序列,然后有下面四种操作: Insert x在序列尾部加入一个值为\(x\)的元素,而且保证序列中每个元素都互不相同. Query_1 s t k查询区间\([s,t]\)中第\ ...