前言
这是一篇基础CSS布局的内容,可能内容比较的简单。但是很适合查缺补漏的阅读。
这篇文章来自于互联网(掘金:Sweet_KK)。我简单的自己跑了一遍,添加了一些自己的看法,删了一些个人感觉不重要的,重新排版了一下。
当然,如果原作者感觉不妥,私信就删。
一、水平居中
1.1、文本/行内元素/行内块级元素
tips:text-align只控制行内:文字、行内元素、行内块级元素,相对于它的块级父元素对齐。
#view{ text-align: center; }
只对行内内容有效;属性会继承影响到后代行内内容;如果子元素宽度大于父元素宽度则无效,只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候,才会水平居中。
1.2、单个块级元素
tips:在margin有剩余时,并且如果左右margin设置了auto,那么将会均分剩余空间。此外,如果上下的margin设置了auto,其计算值则为0。
#view{ width: 666px; /*必须定宽*/ margin: 0 auto; }
必须固定宽度,且不能设置为auto;宽度要小于父元素,否则无效。
1.3、绝对定位
tips:
- 1、top、right、bottom、left的值是相对于父元素尺寸的
- 2、margin或者transform是相对于自身尺寸的
- 二者组合,达到水平居中的目的
使用margin-left需要先知道宽度;并且在IE9以下,使用transform兼容性不好。
1.4、flex
#view{ display: flex; justify-content: center; }
PC端、移动端的兼容性不好
总结
Sweet_KK原话总结:
对于水平居中,我们应该先考虑,哪些元素有自带的居中效果,最先想到的应该就是 text-align:center 了,但是这个只对行内内容有效,所以我们要使用 text-align:center 就必须将子元素设置为 display: inline; 或者 display: inline-block; ;其次就是考虑能不能用margin: 0 auto; ,因为这都是一两句代码能搞定的事,实在不行就是用绝对定位去实现了。
移动端能用flex就用flex,简单方便,灵活并且功能强大,无愧为网页布局的一大利器!
二、垂直居中
2.1、单行文本/行内元素/行内块级元素
tips:line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。
#view{ height: 150px; line-height: 150px; /*与height等值*/ }
只能用于单行行内内容;且需要先知道高度
2.2、多行文本/行内元素/行内块级元素
tips:也可以选择使用span把所有文字包裹起来,设置display:inline-block 用转换成图片的方式解决
#parent{ height: 150px; //元素在页面呈现为5行,则line-height的值为height/5 line-height: 30px; }
只能用于单行行内内容;且需要先知道高度
2.3、图片
#parent{ height: 666px; line-height: 666px; font-size: 0; } img#son{vertical-align: middle;} /*默认是基线对齐,改为middle*/
需要添加font-size: 0; 才可以完全的垂直居中
2.4、单个块级元素
设置tabl-cell的元素,宽度和高度的值设置百分比无效,需要给它的父元素设置display: table; 才生效。
table-cell不感知margin,在父元素上设置table-row等属性,也会使其不感知height。
设置float或position会对默认布局造成破坏,可以考虑为之增加一个父div定义float等属性;内容溢出时会自动撑开父元素。
2.5、绝对定位
方法1
tips:子绝父相,top、right、bottom、left的值是相对于父元素尺寸的,然后margin或者transform是相对于自身尺寸的,组合使用达到水平居中的目的
使用margin-left需要先知道宽度;并且在IE9以下,使用transform兼容性不好。
方法2
tips:当top、bottom为0时,margin-top&bottom会无限延伸占满空间并且平分
#parent{position: relative;} #son{ position: absolute; margin: auto 0; top: 0; bottom: 0; height: 50px; }
2.6、flex
总结
Sweet_KK原话总结:
对于垂直居中,最先想到的应该就是 line-height 了,但是这个只能用于行内内容;
其次就是考虑能不能用vertical-align: middle; ,不过这个一定要熟知原理才能用得顺手,建议看下vertical-align和line-height的基友关系 ;
然后便是绝对定位,虽然代码多了点,但是胜在适用于不同情况;
移动端兼容性允许的情况下能用flex就用flex
最后,如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习
如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频