css绝对内容布局,这可能是最全面的CSS基础布局文章

前言

这是一篇基础CSS布局的内容，可能内容比较的简单。但是很适合查缺补漏的阅读。这篇文章来自于互联网(掘金：Sweet_KK)。我简单的自己跑了一遍，添加了一些自己的看法，删了一些个人感觉不重要的，重新排版了一下。

当然，如果原作者感觉不妥，私信就删。

一、水平居中

1.1、文本/行内元素/行内块级元素

tips：text-align只控制行内：文字、行内元素、行内块级元素，相对于它的块级父元素对齐。

只对行内内容有效；属性会继承影响到后代行内内容；如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置text-align属性的元素宽度的时候，才会水平居中。

1.2、单个块级元素

tips：在margin有剩余时，并且如果左右margin设置了auto，那么将会均分剩余空间。此外，如果上下的margin设置了auto，其计算值则为0。

必须固定宽度，且不能设置为auto；宽度要小于父元素，否则无效。

1.3、绝对定位

tips：

1、top、right、bottom、left的值是相对于父元素尺寸的2、margin或者transform是相对于自身尺寸的二者组合，达到水平居中的目的

使用margin-left需要先知道宽度；并且在IE9以下，使用transform兼容性不好。

1.4、flex

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所占据的高度是多少(无论比文字大还是比文字小)，其占据的空间都是与文字内容公用水平中垂线的。

只能用于单行行内内容；且需要先知道高度

2.2、多行文本/行内元素/行内块级元素

tips：也可以选择使用span把所有文字包裹起来，设置display：inline-block 用转换成图片的方式解决

只能用于单行行内内容；且需要先知道高度

2.3、图片

需要添加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会无限延伸占满空间并且平分

2.6、flex

总结

Sweet_KK原话总结：对于垂直居中，最先想到的应该就是 line-height 了，但是这个只能用于行内内容；其次就是考虑能不能用vertical-align: middle; ，不过这个一定要熟知原理才能用得顺手，建议看下vertical-align和line-height的基友关系 ；然后便是绝对定位，虽然代码多了点，但是胜在适用于不同情况；移动端兼容性允许的情况下能用flex就用flex

尾声

再一次声明，这篇文章主干来自于互联网(掘金：Sweet_KK)。我只是站着巨人的肩膀上重新跑了一遍，加深一下印象~

举报/反馈