前言
这是一篇基础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’可以领取一套完整的学习视频