水平垂直居中

水平居中

子元素宽高已知：

.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; margin-left: -子元素宽/2; margin-top: -子元素高度/2; }
用绝对定位的方式来布局，元素脱离了正常的文档流，并不是最推荐的使用方式，因为：相对定位的层（position:relative）如果没有设置高度，也没有包住里面绝对定位的元素。那么，一旦相对定位元素本身的高度变化了（例如：不同浏览器优先采用的字体样式不同，导致文档高度不同）就会影响到下面的元素，位于正常文档流里面的元素的定位。
所以应该注意给外层元素设置高度，让它包裹住里面的元素。这样在审查元素时对于问题的定位，和后续的维护（例如：需求变更，多加一些字之类的）更灵活。
原则是每个相对屏幕中间位置绝对定位的布局应该互不干扰。
这个地方需要注意的是：绝对定位的子元素，是相对有宽高的父元素定位的，如果父元素的父元素也有宽高。效果就会受到影响，有宽高的父元素（例如：1000px的这层）一定要是相对屏幕尺寸的，外面不能在包一个父亲了。
也可以使用CSS3 transform属性（浏览器兼容性，只适用于ie9+） .parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

子元素宽高未知：

将子元素设置为行内元素，父元素设置为text-align:center .container{ width: 300px; height: 200px; background: pink; position: relative; text-align: center; } .inner{ display: inline-block; }
text-align:center
这个只对行内元素有效，因此要使用必须将子元素设置为display:inline,或者display:inline-block

垂直居中

单行行内元素：

子元素的行高等于高度：

但是目前阶段需要注意，只有行内块元素才能实现利用height 和line-height一致来实现，垂直居中，块元素和行内元素都是不行的。normal类似于一个清零的操作，如果不设置，子元素就会继承父元素的line-height，这样每个子元素的行高都会变得很高，设置之后就是自身的高度了
container { height: 400px; background: pink; } inner{ display: inline-block; height: 200px; line-height: 200px; }

兼容Ie8：

需要在子元素和父元素之间在包一层
html:

这是子元素
这是子元素

css: .parent{ height: 100px; } .child-wrap{ line-height: 100px; } .child-content{ display: inline-block; line-height: normal; vertical-align: middle; }

多行元素：

table-cell的方式：

弊端就是其子元素的表现形式和行内元素类似，子元素不能独占一行
.container { width: 200px; height: 400px; background: pink; position: absolute; display: table; vertical-align:middle; } .inner{ display: table-cell; vertical-align:middle; }

设置一个空的行内元素：

设置一个空的行内元素，使其 height:100%，display:inline-block,vertical-align: middle; 并且 font-size:0。
设置一个空元素，高度和父元素相等，并且设置垂直居中的属性。
但是，这只是用与所有的行内元素的宽度和不超过父元素的宽度的情况。

123

.container{ width: 400px; height: 100px; background: pink; text-align: center; } img{ vertical-align: middle; } p{ display: inline-block; height: 100%; line-height: 100%; vertical-align: middle; font-size: 0; }

父元素宽高未知：

通过设置padding: 上 右 下 左;一般可以达到我们的需要，最多再加上text-align: center;

图片和文字垂直居中：

让li里面的文字和图片居中对齐的方式，单行文本可以text-align：center，
左边的icon可以通过设置padding-left的方式给li的左边挪出一块空的地方来，然后通过绝对定位的方式，在那个位置上居中对齐
span.icon就display: inline-block;然后设置宽高，然后绝对定位+tarnslate(-50%,-50%)