原文链接水平居中1）如果是内联元素，为其父元素设置text-align:center，实现内联元素的水平居中。2）如果是块级元素，给元素设置margin:0auto。3）如果子元素包含float:left属性。为了使子元素水平居中，可以将父元素的宽度设置为fit-content，加上边距，设置如下：.parent{width:-moz-fit-content;宽度：-webkit-适合内容；宽度：适合内容；margin:0auto;}fit-content是CSS3中width属性新增的一个属性值，可以轻松实现水平居中带margin。目前，它仅支持Chrome和Firefox浏览器。4）使用flexversion2012布局，可以轻松实现水平居中，子元素设置如下：.son{display:flex;justify-content:center;}5）使用flex2009版本，父元素显示：box;box-pack:center;设置如下：.parent{display:-webkit-box;-webkit-box-orient：水平；-webkit-box-pack：中心；显示：-moz-box；-moz-box-orient：水平；-moz-box-pack：中心；显示：-o-box；-o-box-orient：水平；-o-box-pack：中心；水平的;-ms-box-pack：中心；展示：盒子；盒子方向：水平；box-pack:center;}6)使用CSS3中新的transform属性，子元素设置如下：.son{位置：绝对；左：50%；transform:translate(-50%,0);}7)使用绝对定位方式，负margin-left，设置子元素如下：.son{position:absolute;宽度：固定；左：50%；margin-left:-0.5width;}8)使用绝对定位，left:0;right:0;margin:0auto;子元素设置如下：.son{position:absolute;宽度：固定；左：0；右：0；margin:0auto;}垂直居中单行文本1）如果元素是单行文本，可以设置line-height等于父元素的高度inline-block-level元素2）如果元素是一个内联块级元素，基本思想是使用display:inline-block,vertical-align:middle和一个伪元素使内容块在容器中居中..parent::after,.son{display:inline-堵塞;垂直对齐：中间；}.parent::after{内容：'';height:100%;}这是一个很流行的方法，也适用于IE7。元素高度是可变的，只有在td或th时才会生效。对于其他块级元素，如div、p等，默认不支持。为了使用vertical-align，我们需要设置父元素display:table，子元素display:table-cell;vertical-align:middle;优点元素的高度可以动态改变，不需要在CSS中定义，如果父元素没有足够的空间，元素的内容不会被截断。缺点在IE6~7无效，甚至IE8beta。4)Flex2012版本可用，这是CSS布局的未来趋势。Flexbox是CSS3的一个新属性。设计初衷是为了解决垂直居中等常见的布局问题。父元素可以这样设置，保证子元素垂直居中：。父{显示：flex;align-items:center;}优点内容块宽高任意，优雅溢出。它可以用于更复杂和高级的布局技术。缺点是IE8/IE9不支持需要浏览器厂商前缀渲染。有一些问题5)使用flex2009版本..parent{display:box;盒子方向：垂直；box-pack:center;}优点实现简单，可扩展性强缺点兼容性差，不支持IE6）Transform可以用来设置父元素的相对定位（position:relative），子元素如下css样式：.son{位置：绝对；顶部：50%；-webkit-transform:翻译(-50%,-50%);-ms-transform:翻译(-50%,-50%);transform:translate(-50%,-50%);}优点代码量小缺点IE8不支持，属性需要附加浏览器厂商前缀，可能会干扰其他transform效果，某些情况下会出现文字模糊或元素边界渲染。元素的高度是固定的7）设置父元素的相对定位（position:relative），子元素如下：cssstyle:.son{position:absolute;顶部：50%；高度：固定；margin-top:-0.5height;}优点适用于所有浏览器。缺点是当父元素空间不够时，子元素可能不可见（当浏览器窗口缩小时，滚动条不出现）。如果子元素设置了overflow:auto，当高度不够时，会出现滚动条。8）设置父元素的相对定位（position:relative），子元素如下css样式：.son{position:absolute;高度：固定；顶部：0；底部：0；margin:auto0;}简单缺点当空间不够时，子元素会被截断，但不会有滚动条。总结水平居中比较简单，一共提供了8种方法。一般来说，text-align:center,marin:0auto;够了①text-align:center;②margin:0auto;③width:fit-content;④flex⑤盒模型⑥transform⑦⑧垂直居中两种不同的绝对定位方式，一共提供了8种方式①??单行文本,line-height②内联块级元素，使用display:inline-block,vertical-align:middle;加上伪元素辅助实现③vertical-align④flex⑤盒模型⑥transform⑦⑧两种不同的绝对定位方式我们发现，flex，boxModel，transform，绝对定位，这几种方式对水平居中和垂直居中都适用。希望对大家有所帮助。
