css3 实现居中的9中方法
<!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中方法的更多相关文章
- Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...
- IE/Chrome背景图片居中1px偏移解决方法
最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...
- CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...
- 纯CSS3实现垂直居中的九种方法
浏览时看到的资料,每个都做了测试,很好,就先收了~ 测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题 ...
- 实现DIV居中的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C#中方法的声明
C#中方法的声明(四要素) 访问修饰符 :public,private(方法的默认访问修饰符) 返回值类型:void 和 非void 方法名称 : 规范是方法名称取动词,每个单词的首字母大写. ...
- C#中方法的参数的四种类型
C#中方法的参数有四种类型: 1. 值参数类型 (不加任何修饰符,是默认的类型) 2. 引用型参数 (以ref 修饰符声明) 3. 输出型参数 (以out 修 ...
- JAVA文件夹导入到Eclipse中方法：
将JAVA文件夹导入到Eclipse中方法:方法一: 直接将java文件夹复制,然后粘贴到项目下:方法二:1.打开eclipse,点击项目的空白处,选择import:2.选择Existing Proj ...
- C#中方法的调用
C#中方法的调用 1.同一个类中方法的调用: 静态方法可以直接调用静态方法 静态方法不能直接调用非静态方法,静态方法先生成. 非静态方法可以直接调用静态方法 如果静态方法要调用非静态的方法,必须使用实 ...
随机推荐
- Bootstrap历练实例：带表格的面板
带表格的面板 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table.假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分 ...
- dht 分布式hash 一致性hash区别
先有一致性hash :一致性哈希,似乎最早提出是在分布式缓存里面的,让节点震荡的时候,影响最小.不过现在已经应用在分布式存储和p2p系统里面. dht 是p2p领域的概念,内有三大概念是由keyspa ...
- 基础的Mapgis三维二次开发-插件式
最近在做一个杭州石油的项目开发一个小系统. 1.命令必须是 ICommand 的派生类 using System; using System.Collections.Generic; using Sy ...
- CentOS 编译安装PHP5.6（7以上也通用）
由于公司有新服务器需要构建一套LNMP平台,且需要编译安装各个部件,所以记录下此文章. 这是安装PHP涉及到的软件包(可以自行决定使用哪个版本): ├── libiconv-1.15.tar.gz ├ ...
- [bzoj]3436 小K的农场
[题目描述] 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述:农场a比农场b至少多种植了c个单位的 ...
- MySQL 使用GTID进行复制
MySQL 使用GTID进行复制 1. GTID的格式和存储 1.1 GTID 集 1.2 mysql.gtid_executed 表 1.3 mysql.gtid_executed 表压缩 2. G ...
- linux三剑客正则表达式
^:以...开头,^d,意思是以d开头.例如:ls -F(-p) | grep " ^d " $:以...结尾,/$,意思是以/结尾.例如:ls -F(-p) | grep &q ...
- 【windows】共享文件夹设置
控制面板\网络和 Internet\网络和共享中心\高级共享设置 在当前的域\公用\家庭网络 下文件和打印机共享开关打开 现在可以在 计算机-网络 里面看到共享的计算机啦 选中自己想要分享的文件,右键 ...
- GoF23种设计模式之行为型模式之策略模式
传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 1概述 定义一系列算法,把它们一个个都封装起来,并且让它们可以相互 ...
- 合肥工业大学宣城校区大学生创新创业训练项目申报书：“基于Spark平台的人工智能知识的知识图谱构建”