CSS垂直居中的实现
这个问题可以说是老生常谈了,面试时经常问道,一直没整理过,这次做个系统梳理
1、利用display:table实现
从caniuse.com上查到,display:table可以兼容到IE8,以目前环境大部分场合都没问题,上代码
.table{display: table;width: 100%;outline: 1px solid;}
.table>div{display: table-cell;vertical-align: middle;text-align: center;height: 300px;}
.content{outline: 1px solid green;width: 200px;display: inline-block;text-align: left;}
<div class="table">
<div>
<span class="content">这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。</span>
</div>
</div>
适用于内容区宽度,高度不固定的情况
2、利用绝对定位
这是最容易想到的,也是兼容性最好的,但必须知道内容区宽高,上代码
.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.content{width: 200px; height: 150px; outline: 1px solid green;position: absolute;left: 50%;top:50%;margin-left: -100px;margin-top: -75px;}
<div class="absolute-center">
<div class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</div>
</div>
margin-left: -100px;margin-top: -75px;
替换成
transform: translateX(-100px) translateY(-75px);
也能达到一样的效果,只不过要注意兼容问题
这种方式适合与JavaScript一起使用
3、依然是绝对定位
.container{height: 600px; outline: 1px solid;position: relative;}
.content{position: absolute;left:;top:;right:;bottom:;width: 200px;height: 100px;outline: 1px solid green;margin: auto;}
<div class="container">
<div class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</div>
</div>
这里要注意的是一定要设置margin为auto,该属性的默认是为0,对于从左往右书写的语言体系,在外边距采用默认值的情况下,会先计算应用left和top值,right和bottom的值将会用包含块(通常是父元素)的宽高减去该元素的宽高以及left和right的值得到,这种情况下是无法得到居中效果的
4、利用height和负外边距
这种方法需要额外增加一个元素
.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.floater{height: 50%;margin-bottom: -75px;}
.content{width: 200px; height: 150px; outline: 1px solid green;background-color: gainsboro;margin: 0 auto;}
<div class="absolute-center">
<div class="floater"></div>
<div class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</div>
</div>
5、利用伪元素占位
.container{height: 600px; outline: 1px solid;text-align: center;}
.container::after{content:"";width:;height: 100%;display: inline-block;vertical-align: middle;}
.content{width: 200px;height: 100px;outline: 1px solid green;display: inline-block;vertical-align: middle;}
<div class="container">
<div class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</div>
</div>
6、flex
.container{display: flex;text-align: center;height: 400px;outline: 1px solid;}
.content{margin:auto;outline: 1px solid green;}
<div class="container">
<span class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</span>
</div>
IE edge才实现,其他版本IE都不兼容
7、还是flex
.container{display: flex;justify-content:center;align-items:Center;height: 400px;outline: 1px solid;}
.content{outline: 1px solid green;}
<div class="container">
<span class="content">
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
</span>
</div>
flex方法适用于移动端
CSS垂直居中的实现的更多相关文章
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- CSS垂直居中完美有用实例
<!DOCTYPE HTML> <html> <head> <meta meta chars ...
- Day14:CSS垂直居中
verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- css 垂直居中技巧
CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...
- CSS垂直居中的11种实现方式
今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...
- CSS垂直居中总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...
随机推荐
- netstat---显示Linux中网络系统的状态信息
netstat命令用来打印Linux中网络系统的状态信息,可让你得知整个Linux系统的网络情况. 语法 netstat(选项) 选项 -a或--all:显示所有连线中的Socket: -A<网 ...
- hdu5400Arithmetic Sequence
//一个序列,两个公差d1,d2 //问有多少个区间使得这个区间存在一个点,它的左边是公差为d1的序列 //它的右边是公差为d2的序列 //直接存入每一个点向左和向右延伸的公差长度,乘一下即可 //还 ...
- 华为PUSH SDK 接入方法
本文参考了华为推送平台官网及其Demo:http://developer.huawei.com/cn/consumer/wiki/index.php?title=%E6%8E%A5%E5%85%A5% ...
- js33--责任链模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- theme- 自定义控件属性
今天想要在一个控件中增加自己的一条属性,具体步骤如下 1.在frameworks/base/core/res/res/values/attr中注册属性 因为我们希望增加的属性是在AutoComplet ...
- C#截取中英文混合字符串分行显示
private int GetStrByteLength(string str) { return System.Text.Encoding.Default.GetByteCount(str); } ...
- 洛谷 P1341 无序字母对(欧拉回路)
题目: 解题思路: 我好菜啊!! 首先可以n2搞定,而对于每个点,又可以在当前不优的状态下将不好的状态拼到后面. 最后回溯搞定. 代码: #include<cstdio> #include ...
- ASM(四) 利用Method 组件动态注入方法逻辑
这篇继续结合样例来深入了解下Method组件动态变更方法字节码的实现.通过前面一篇,知道ClassVisitor 的visitMethod()方法能够返回一个MethodVisitor的实例. 那么我 ...
- 学习笔记(三):jQuery之DOM
1.jQuery属性. 获取元素属性的语法: attr(name) 例子:$("#img1").attr("src"); 设 ...
- Linux 解压缩命令整理
一.tar命令 参数 参数 详解 参数 详解 -c 可以使用绝对路径来压缩 -x 解开一个压缩文件的参数指令 -t 查看内容 -r 向压缩归档文件末尾追加文件 -u 更新原压缩包中的文件 -z 有gz ...