css 居中

标签：table   方法   ott   添加   pos   webkit   水平居中   水平   垂直居中   

今天来总结一下自己知道的居中方法：

一.水平居中

1.text-align:center;  文字水平居中，也可以放在父元素中，强行让子元素居中。

2.margin: 0 auto;   使子元素在父元素中水平居中。

二、绝对居中

1. 父元素定位，子元素也使用定位：position:absolute;

    然后子元素使用 top:0; left:0;right:0;bottom:0;margin:auto;width:xx; (此方法必须定义子元素的高度);

2. 父元素定位，子元素也使用定位：position:absolute;

    然后子元素使用 left: 50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); /* Safari */  (无需定义高度，但是要注意兼容性写法)。

三、垂直居中

1.display:inline-block; vitical-align:middle;  (无需定义高度，也可以实现)

2.父元素设置 display:table; 子元素设置display:table-cell;vitical-align:middle;

3.单行文字居中显示，设置height的值与line-height的值相等即可。

今天想到的就这些，想到其他的再来添加。

css 居中

标签：table   方法   ott   添加   pos   webkit   水平居中   水平   垂直居中   

原文地址：http://www.cnblogs.com/Alisa-pengpeng/p/6120081.html