html居中问题

1、块元素水平居中：

-左=自动；-右=自动；

2、浮动块元素水平居中：

外包装块 “float:left;:;left:50%”;

内部块“浮动：左；:;右：50%”

3、中心内容：

内联元素：文本对齐：；-对齐：

块元素：

：表格单元格；-对齐：；

如果是单行内容：line-=

4、绝对定位的元素垂直和水平居中：

方法一：

.{

宽度：600px；：400像素；

: ; 左：50%；最高：50%；

-顶部：-200px；/* 一半高度 */

-左：-300像素；/* 宽度的一半*/

}

不过这种方法的优点是兼容性更好，缺点是需要提前知道元素的大小，否则负值的调整不能准确。此时，往往是借助 JS 来获取的。

方法二：使用 CSS3

随着 CSS3 的兴起，有一个更好的解决方案，就是使用代替。偏移量的百分比值是相对于自身大小的，不需要提前知道元素的大小，横向和纵向都显示在中心。但是这种方法不兼容。

.{

宽度：600px；：400像素；

: ; 左：50%；最高：50%；

: (-50%, -50%);/*前50%是宽度的一半，后50%是宽度的一半*/

}

方法三：上下左右0位置定位+“:auto”（推荐练习！）

.{

宽度：600px；：400像素；

: ; 左：0；顶部：0；右：0；: 0;

： 汽车; /* 水平和垂直居中 */

}

如果只设置“-left:auto”+“-right:auto”，只会水平居中；

如果只设置“-top:auto”+“-:auto”，则只会垂直居中；

表格居中问题：

1、外面一层

但它只能水平居中，不能垂直居中

2、外面一层

同上