一、水平居中
(1)文本/行内元素/行内块级元素▲
“好的”、display:inline、display:inline-block;
原理:text-align只控制行内内容(文字、行内元素、行内块级元素)相对他的块级父元素对齐
<div class="parent"> <div class="son"> </div> </div>
#parent{ text-align: center; }
(2)单个块级元素▲
原理:有这么一种情况:在margin有节余的同时如果左右margin设置了auto,将会均分剩余空间
#son{ width: 100px; /*必须定宽*/ margin: 0 auto; }
(3)多个块级元素
原理:使用text-align,将块级元素转换成内敛元素或者行内块级元素
#parent{ text-align: center; } .son{ display: inline-block; /*改为行内或者行内块级形式,以达到text-align对其生效*/ }
(4)使用绝对定位实现▲
原理:子绝父相,top、right、bottom、left的值是相对于父元素尺寸的,然后margin或者transform是相对于自身尺寸的,组合使用达到水平居中的目的
#parent{ height: 200px; width: 200px; /*定宽*/ position: relative; /*父相*/ background-color: #f00; } #son{ position: absolute; /*子绝*/ left: 50%; /*父元素宽度一半,这里等同于left:100px*/ transform: translateX(-50%); /*自身宽度一半,等同于margin-left: -50px;*/ width: 100px; /*定宽*/ height: 100px; background-color: #00ff00; }
(5)任意个元素(flex)
原理:就是设置当前主轴对齐方式为居中。说不上为什么,flex无非就是主轴侧轴是重点,然后就是排列方式的设置
#parent{ display: flex; justify-content: center; }
本章小结:
- 对于水平居中,我们应该先考虑,哪些元素有自带的居中效果,最先想到的应该就是
text-align:center
了,但是这个只对行内内容有效,所以我们要使用text-align:center
就必须将子元素设置为display: inline;
或者display: inline-block;
; - 其次就是考虑能不能用
margin: 0 auto;
,因为这都是一两句代码能搞定的事,实在不行就是用绝对定位去实现了。 - 移动端能用flex就用flex,简单方便,灵活并且功能强大,无愧为网页布局的一大利器!
二、垂直居中
(1)单行文本/行内元素/行内块级元素▲
原理:line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。
#parent{ height: 150px; line-height: 150px; /*与height等值*/ }
(2)多行文本/行内元素/行内块级元素
原理:line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。
#parent{ /*或者用span把所有文字包裹起来,设置display:inline-block转换成图片的方式解决*/ height: 150px; line-height: 30px; /*元素在页面呈现为5行,则line-height的值为height/5*/ }
(3)图片▲
使用:vertical-align: middle;
.parent{ width: 800px; height: 200px; border: 1px solid saddlebrown; text-align: center; line-height: 200px; } .parent img{ vertical-align: middle; }
(4)单个块级元素
(4-1) 使用tabel-cell实现:
原理:CSS Table,使表格内容对齐方式为middle
#parent{ display: table-cell; vertical-align: middle; }
(4-2) 使用绝对定位实现:▲
原理:子绝父相,top、right、bottom、left的值是相对于父元素尺寸的,然后margin或者transform是相对于自身尺寸的,组合使用达到水平居中的目的
#parent{ height: 150px; position: relative; /*父相*/ } #son{ position: absolute; /*子绝*/ top: 50%; /*父元素高度一半,这里等同于top:75px;*/ transform: translateY(-50%); /*自身高度一半,这里等同于margin-top:-25px;*/ height: 50px; }
原理:当top、bottom为0时,margin-top&bottom会无限延伸占满空间并且平分
#parent{position: relative;} #son{ position: absolute; margin: auto 0; top: 0; bottom: 0; height: 50px; }
(4-3) 使用flex实现:
#parent{ display: flex; align-items: center; }
★本章小结:
- 对于垂直居中,最先想到的应该就是
line-height
了,但是这个只能用于行内内容; - 其次就是考虑能不能用
vertical-align: middle;
,不过这个一定要熟知原理才能用得顺手; - 然后便是绝对定位,虽然代码多了点,但是胜在适用于不同情况;
- 移动端兼容性允许的情况下能用flex就用flex
三、水平垂直居中
(1)行内/行内块级/图片▲
原理:text-align: center;
控制行内内容相对于块父元素水平居中,然后就是line-height
和vertical-align
的基友关系使其垂直居中,font-size: 0;
是为了消除近似居中的bug
#parent{ height: 150px; line-height: 150px; /*行高的值与height相等*/ text-align: center; font-size: 0; /*消除幽灵空白节点的bug*/ } #son{ /*display: inline-block;*/ /*如果是块级元素需改为行内或行内块级才生效*/ vertical-align: middle; }
缺点:只对行内内容有效;需要添加font-size: 0;
才可以完全的垂直居中;不过需要注意html中#parent包裹#son之间需要有换行或空格;熟悉line-height
和vertical-align
的基友关系较难
(2)table-cell
#parent{ height: 150px; width: 200px; display: table-cell; vertical-align: middle; /*text-align: center;*/ /*如果是行内元素就添加这个*/ } #son{ /*margin: 0 auto;*/ /*如果是块级元素就添加这个*/ width: 100px; height: 50px; }
(3)绝对定位
原理:子绝父相,top、right、bottom、left的值是相对于父元素尺寸的,然后margin或者transform是相对于自身尺寸的,组合使用达到几何上的水平垂直居中#parent{ position: relative; } #son{ position: absolute; top: 50%; left: 50%; /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/ transform: translate(-50%,-50%); }
(4)绝对居中
原理:当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分;当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分
#parent{ position: relative; } #son{ position: absolute; margin: auto; width: 100px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; }
(5)flex
#parent{ display: flex; } #son{ margin: auto; } 或 #parent{ display: flex; justify-content: center; align-items: center; } 或 #parent{ display: flex; justify-content: center; } #son{ align-self: center; }
★本章小结:
- 一般情况下,水平垂直居中,我们最常用的就是绝对定位加负边距了,缺点就是需要知道宽高,使用transform倒是可以不需要,但是兼容性不好(ie9+);
- 其次就是绝对居中,绝对定位设置top、left、right、bottom为0,然后
margin:auto;
让浏览器自动平分边距以达到水平垂直居中的目的; - 如果是行内/行内块级/图片这些内容,可以优先考虑
line-height
和vertical-align
结合使用,不要忘了还有text-align
,这个方法代码其实不多,就是理解原理有点困难,想要熟练应对各种情况还需好好研究; - 移动端兼容性允许的情况下能用flex就用flex。