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 ...
随机推荐
- asp.net,cookie,写cookie,取cookie
Cookie是一段文本信息,在客户端存储 Cookie 是 ASP.NET 的会话状态将请求与会话关联的方法之一.Cookie 也可以直接用于在请求之间保持数据,但数据随后将存储在客户端并随每个请求一 ...
- C# winfrom 窗体的StartPosition 属性
StartPosition属性有如下选项,分别含义如下: CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前显示窗口中居中,其尺寸在窗体大小中指定. Manual ...
- dede首页调用顶级栏目单页内容（如：关于我们）
1.调用内容方法,调用描述同理: {dede:channel type="top" row=1} [field:array runphp='yes'] global $dsql; ...
- 利用js查找页面中的内链，外链
起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...
- JSON详解
首先要知道JSON是一种轻量级的数据格式,不是一种编程语言,因此其他语言也可以使用. 一.JSON语法 JSON语法可以表现为下面三种值: 1.简单值:字符串.数值.布尔值和null,如"h ...
- ie8中遇到的兼容问题以及解决方案
一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-rad ...
- Python之路Day21-自定义分页和cookie
本节知识点概要 1.URL 2.views - 请求其他信息 - 装饰器 3.Templates - 母版 - 自定义 4.Models操作 5.分页(自定义分页) 6.cookie 7.sessio ...
- mysql 数据表中查找重复记录
select mobile_phone,count(*) as count from lawyer group by mobile_phone having count>1;
- JAVA笔试题集（一）--JAVASE部分
红色答案为参考答案 1.从下列选项中选择正确的Java表达式(多选) A. int k=new String("aa"); B. String str=String ...
- Des与3Des加密解密
/// <summary> /// Des和3Des算法 /// </summary> public class Des { /// <summary> /// D ...