CSS实现居中

1.水平居中

(1)行内元素

设置父元素的

text-align:center

(2)定宽 块状(display:block)元素

设置子元素

margin-left：automargin-right：auto 

(3)定宽（100px） 块状(display:block)元素

使用负外边距

设置父元素为相对定位

position: relative;

子元素：

position: absolute;left: 50%;margin-left: -50px;

(4)不定宽 块状元素
设置父元素为相对定位

position: relative;

子元素：

position: absolute;left: 50%;-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);-o-transform: translate(-50%,0);transform: translate(-50%,0);

—–css3中的transform属性中的translate，可以使元素移动时相对于自身的宽度和高度。

(5) 文字居中

对于单行文字来说，直接使用text-align: center即可。
多行文字可以看作一个块级元素参考margin法和定位法。

2.垂直居中

(1) 块状 定宽（100px）

父{    position: relative;}子{    position: absolute;    /* 核心 */    top: 50%;    margin-top: -50px;}

(2) 块状 定宽（100px）

css3中的clac()属性

父{    position: relative;}子 {    position: absolute;    /* 核心 */    top: calc(50% - 50px);}

(3)块状 不定高

父{    position: relative;}子{    position: absolute;    top: 50%;    -webkit-transform: translate(0,-50%);    -ms-transform: translate(0,-50%);    -o-transform: translate(0,-50%);    transform: translate(0,-50%);}

(4)单行文本垂直居中

将其文本span 的line-height设置成和父元素height的值一样

(5)多行文本垂直居中

display: table-cell; vertical-align:middle;text-align:center;

(5)绝对垂直居中

父{  position: relative;}子{    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;}

其他

css3中可以使用Flexbox的解决方案