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"> & ...
随机推荐
- Linux下使用网上银行
Linux下使用网上银行 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...
- JavaScript学习总结(11)——JS常用函数(二)
37. getElementsByClassName ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getElementsByClassName( ...
- iOS报错 -pie can only be used when targeting iOS 4.2 or later
近期,使用师兄的project时.突然报错之前没发现这个错误.信息例如以下: ld: -pie can only be used when targeting iOS 4.2 or later cla ...
- LeetCode 136 Single Number(仅仅出现一次的数字)
翻译 给定一个整型数组,除了某个元素外其余元素均出现两次. 找出这个仅仅出现一次的元素. 备注: 你的算法应该是一个线性时间复杂度. 你能够不用额外空间来实现它吗? 原文 Given an array ...
- javascript创建对象的方法--构造函数模式
javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...
- erroe:plot.new() : figure margins too large
使用R时多次出现这个错误,plot.new() : figure margins too large,提示图片边界太大 解决方法,win.graph(width=4.875, height=2.5,p ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
- 整理wmic使用,不重启变环境变量 .
整理wmic使用,不重启变环境变量 . 利用wmic修改是直接生效的:(e:\tools 是新添加的目录) wmic ENVIRONMENT where "name='path' and u ...
- JdbcTemplate简单介绍
转自:http://www.php.cn/java-article-368819.html 一.关于JdbcTemplate JdbcTemplate是最基本的Spring JDBC模板,这个模板支持 ...
- 40.【IntelliJ IDEA】使用idea解决新建jsp文件而找不到jsp文件模版的新建选项
转自:https://www.cnblogs.com/sxdcgaq8080/p/7676294.html 使用idea解决新建jsp文件而找不到jsp文件模版的新建选项,这样每次创建一个新的jsp文 ...