CSS之水平垂直居中
在css的世界里，如果我们想让一个块级元素水平居中，想必大家都知道利用margin:0 auto;嘛，这样就可以让块级元素在它的父元素中水平居中了。
列如这样：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
margin:0 auto;
width:50px;
height:50px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
运行效果图如下，绿色方块水平居中于它的父元素
咦，那么问题来了，我们想要绿色方块垂直居中或者水平垂直居中呢？
是不是只要设置margin:auto 0;或margin:auto;就可以了呢？
曾经我也是这么以为的，因为设置margin:0 auto;可以水平居中嘛。
但是垂直居中就不是这么回事啦。
在普通文档流中，倘若你设置margin:auto，其实浏览器解析时，会理解为margin:0 auto;
（将margin-top和margin-bottom设置为0，而margin-left和margin-right设置为左右自适应）。
摘自W3.org
如果你心存顾虑，可以将上面demo中的margin:0 auto;换成margin:auto;，运行后的结果是一样的。
咦，那如果我们现在想让块级元素垂直居中呢，如何处理？
| 方法一： |
将元素设置为绝对定位absolute，这样就可以让元素脱离普通文档流，且absolute有一特性：会将元素的display设置为block。
然后，再设置绝对定位的坐标(left,top,right,bottom)为0，这样会使浏览器为绝对定位包裹一层新的盒子模型。
再结合margin，就可以你想水平居中(margin:0 auto;)就居中，垂直居中(margin:auto 0;)就居中了，水平垂直居中(margin:auto;)也完美。
下面列举的demo为‘水平垂直居中’：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
margin: auto;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50px;
height:50px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
PS：position:fixed也可以脱离文档流，so它和absolute是一样儿滴，区别就是fixed是相对于浏览器窗口进行定位的。
| 方法二： |
方法一是通过改变元素的文档流，那么除开改变它的文档流呢？
那我们就另辟蹊径，计算元素的宽高嘛。
么子意思？
以‘垂直居中’举例，倘若我们有个子元素child，需要垂直居中于它的父元素parent。如下：
图一
那么首先我们得将子元素child以父元素的顶点(top,left=0 如上图所示)，往下和右移动父元素宽高的50%；如下图所示：
图二
再将子元素Child以parent中心点，往上和左移动自身元素宽高的50%，就垂直居中啦，如下图所示：
图三
好了，这个流程我们是理清楚了，那用CSS应该怎么实现呢？
列举2个:
（1）、 margin + absolute
设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的情况；
再将元素的margin-top，margin-right设置为-50%，那么就可以实现垂直居中啦。
示例代码如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
</div>
</body>
</html>
注：margin的百分比值参照其包含块的宽度进行计算的。
另外默认浏览器一般默认writing-mode:horizontal-tb和direction:ltr，即横向排版，所以margin无论宽高设置百分比时，都会以父元素的width进行计算。纵向嘛就是以父元素的height进行计算咯。
PS:如果你想纵向排版可以这么设置
#demo{
/*for browsers of wekit engine*/
-webkit-writing-mode: vertical-rl ；
/*for ie*/
writing-mode: tb-rl;
}
所以方法二中用margin+absolute让子元素居中时，margin必须要知道子元素的宽高，切忌不能用百分比。
（2）、 translate + absolute
设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的情况；
再通过translate将元素移动50%,50%，也可以得到图三，实现垂直居中。
示例代码如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
<!--渐进增强-->
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div> </div>
</body>
</html>
| 方法三： |
利用table-cell属性就可以轻松实现。
将父元素变为table-cell，从而可以使用table的属性vertical-align:middle，使元素垂直居中，再将子元素margin:0 atuo;就可以实现水平居中咯。
PS：table-cell必须包含在display:table元素中，table-cell是属于table滴嘛。
示例代码如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.root {
width:50%;
height:100px;
border:1px solid black;
display:table;
}
.parent {
display:table-cell;
vertical-align:middle;
}
.child {
width:50px;
height:50px;
background:#22B14C;
margin:0 auto;
}
</style>
</head>
<body>
<div class="root">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
</html>
好了，css之垂直水平居中就算完了(弹性布局Flex不在本篇讨论范畴)。
晚安，everyone~
CSS之水平垂直居中的更多相关文章
- CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- css实现水平 垂直居中
css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- css各种水平垂直居中
css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
- CSS如何水平垂直居中？
CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...
随机推荐
- OpenCV学习笔记（一）——OpenCV3.1.0+VS2015开发环境配置
摘要: 由于最近AR(增强现实)这个概念非常火爆,各种基于AR的应用及游戏逐渐面向大众,而在AR中最重要的两个技术就是跟踪识别和增强渲染,其中跟踪识别是通过OpenCV这个开源的计算机视觉库来实现的, ...
- js数组操作总结
1.数组的检测 ECMAScript3 if(value instanceof Array){ //执行操作 } 假定单一全局环境,如果网页存在多个框架,多个window,Array具有不 ...
- kgcd ,fmod,fgcd
参考:NENU CS ACM模板made by tiankonguse 2.13 GCD 快速gcd: 位操作没学,真心不懂二进制,还是得学啊 code: int kgcd(){ if(!a || ...
- BJITJobs : 北京IT圈高端职位招聘信息，成功率最高的高端求职渠道
你有实力,但比你差的人都升了,你的师弟都年薪50万了,你还是找不到机会.为什么你离高端机会总是差一步呢?其实你离成功就差一次机会,一个适合你的高端职位的信息! 招聘网站不靠谱:三大网站都是低端职位为主 ...
- Odoo PDF 取消Header后 空白处理
处理方法是 设置纸张格式中的上边距 ,调整位合适的位置.效果如下图:
- python Django session/cookie
一, Cookie #cookie # def cook1(request): # print(request.COOKIES) # 查看cooke # # print(request.get_sig ...
- SQl SGA 整理
--查看诊断位置信息 select * from v$diag_info; --查看sga中内存分配信息 select * from sys.x$ksmfs; --查看内存块还剩余多少 select ...
- Javascript中call和apply的区别和用法
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别.其实就是更改对象的内部指针,即改变对象的this指向的内容.这在面向对象的js编程过程中有时是很有用的.call ...
- js ---- 时间格式
Js获取当前日期时间及其它操作 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); ...
- SDOI 2016 数字配对
题目大意:给定n个数字以及每个数字的个数和权值,将满足条件的数字配对,使得总代价不小于0,且配对最多 最大费用最大流拆点,对于每个点,连一条由S到该点的边,容量为b,花费为0,再连一条到T的边 对于每 ...