纯CSS3实现垂直居中的九种方法
浏览时看到的资料，每个都做了测试，很好，就先收了~
测试的是谷歌浏览器，没有任何问题，用360，IE11,火狐，搜狗浏览器做测试时，第五个方法在360，搜狗，和IE11有点问题，第七个在IE11有问题，第8个在IE11，火狐有问题。保险起见，使用前四个好，出现的问题需要再解决。
<!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实现垂直居中的九种方法的更多相关文章
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- CSS垂直居中的四种方法
写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...
- 顽石系列：CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
随机推荐
- MinGW与Cygwin的一些杂谈
引用:http://www.cnblogs.com/fancybit/archive/2012/07/08/2581590.html 首先MingW和cygwin都可以用来跨平台开发. MinGW是 ...
- kali 安装flash
下载 flash_player_npapi_linux.x86_64.tar.gz 解压: tar -zxvf flash_player_npapi_linux.x86_64.tar.gz 将解压后的 ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- 解决js输出汉字乱码问题
当我们需要使用js输出汉字时,偶然会出现输出的中文汉字乱码的情况,在网上收了很多解决方案 1.在mata中加 <meta content="text/html; charset=utf ...
- spring 事务的配置学习
1.spring事务管理器接口PlatformTransactionManager 接口中的方法 获取事务状态信息 -TransactionStatus getTransaction(Transact ...
- Jenkins的详细安装
操作环境:Windows 一.环境准备 1 安装JDK 本文采用jdk-8u111-windows-x64.exe: 2 配置tomcat 本文采用tomcat8,无需安装,配置JAVA_HOME及J ...
- PREV-5_蓝桥杯_错误票据
问题描述 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号.全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处错误,造成 ...
- window下sh文件在linux转码
本文转载自:https://blog.csdn.net/omiconlee/article/details/53407438 1)在Windows下转换: 利用一些编辑器如UltraEdit或Edit ...
- PAT 乙级 1083 是否存在相等的差（20 分）
1083 是否存在相等的差(20 分) 给定 N 张卡片,正面分别写上 1.2.…….N,然后全部翻面,洗牌,在背面分别写上 1.2.…….N.将每张牌的正反两面数字相减(大减小),得到 N 个非负差 ...
- SpringMVC 源码分析
一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...