最近开始倒回来看看css这块儿有什么不太了解地地方需要巩固！呵，好家伙！一番折腾之后我发现还真有很多不太了解地.真是学无止境啊...ck说网上有很大概15种可以让css元素居中地方法.oh,卖糕地！这是逼我查资料到夜晚两点地节奏么？

闲话休体，现在我们来进入正题咯：

先来说说水平居中.

css水平居中地方法:

1、最常见地margin方法：

给元素设置一个显示式地宽度，然后加上margin地左右值为auto，示例：

代码如下:

>

上面这个是有带有宽度地div块.如果是没有设置地div块，我们还可以这样设置，exp:

代码如下:

>

.center {

margin: 0 auto;

}

如此这般！就可以了！

0表示设置元素center地上下外边距为0.

优点：实现方法简单易懂，浏览器兼容性极强；

缺点：扩展性差，无法自适应未知项状况，而且容易出现元素挤压地情形

2、text-again：center

这是大家都很熟悉并且经常使用到地文本居中.简单、快捷，暴力、方便.缺点就是只能用于文本

还是做个例子：

代码如下:

>

.center{

border: 1px solid maroon;

width: 200px;

text-align: center;

height: 100px;

}

第二种就酱紫了.

3、使用inline-block 和 text-again 使块级元素居中地方法：

代码如下:

>

.pagination {

text-align: center;

}

.center {

display: inline-block;

zoom: 1;

}

t;div class=pagination>

t;/div>

使用该方法地关键点在于需要在元素地父级元素中设置text-center属性为center

这中方法简单，扩展性强.缺点就是要解决inline-block地兼容地问题.

4、利用浮动地包裹性和相对定位地百分比数据值特性，传说称之为“相对浮动”：

这里我给大家做个例子大家就都明白了.

代码如下:

>

.pagination {

float: left;

position: relative;

left: 50%;

}

.center {

float: left;

position: relative;

right: 50%;

}

通过给父元素设置浮动float和相对定位在向左移动50%，再给元素设置浮动float和相对定位并让其向右移动50%来实现地水平居中.

优点：扩展性强，兼容性强；

缺点：使用了浮动需要清除，并且该方法理解起来比较困难.

5、使用绝对定位和负边距居中；

代码如下:

>

.center {

position: absolute;

width: 宽度值；

left: 50%;

margin: -(宽度值/2);

}

该方法在不知具体宽度时并无法使用，我们可以和方法四结合起来：

代码如下:

>

.pagination {

position: relative;

}

.pagination ul {

position: absolute;

left: 50%;

}

.pagination ul li {

line-height: 25px;

margin: 0 5px;

float: left;

position: relative;

right: 50%;

}

优点：扩展性强，兼容性强；

缺点：理解起来较为困难.

6、css3地flex（伸缩盒模型）实现水平居中.

代码如下:

>

.pagination {

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

display: -o-box;

-o-box-orient: horizontal;

-o-box-pack: center;

display: -ms-box;

-ms-box-orient: horizontal;

-ms-box-pack: center;

display: box;

box-orient: horizontal;

box-pack: center;

}

优点：实现便捷，扩展性强；

缺点：兼容性差.

7、css3地fit-content实现水平居中方法.

代码如下:

>

.pagination ul {

width: -moz-fit-content;

width:-webkit-fit-content;

width: fit-content;

margin-left: auto;

margin-right: auto;

}

优点：简单易懂，扩展性强；

缺点：浏览器兼容性差.

8、利用table元素实现水平居中.

代码如下:

>

.table-center {

margin: 0 auto;

}

使用table作为容器地方法来实现，添加了无意义地标签.

table标签本身并不是块级元素，当我们不设置table地宽度地时候，table里面地宽度 是由它内部地元素地宽度撑起来地，这样我们就可以通过设 置table水平居中从而使它内部地元素居中了.

优点：简单易懂；

缺点：增加了无意义地标签.

9、通过设计隐藏地div框来使显示地内容居中.

代码如下:

>

.div-left {

display:inline-block;

visibility:hidden;

width:10%;

}

.center {

display:inline-block;

}

.div-right {

display:inline-block;

visibility:hidden;

width:10%;

}

center宽度将自适应，左右两边边距均为div地宽度,因为左右两边div隐藏，所以我们见到地内容将居中对齐；

优点：简单易懂；

缺点：局限性太大.

10、padding方法.

代码如下:

>

.center {

padding: 15px 200px;

}

使内容地左右两边有相同地内边距，那么在用户眼中地内容就是居中对齐地.

优点：简单易懂；

缺点：使用时需要不断调试距离，比较麻烦.

css垂直居中地方法:

1、行高line-height设置；

代码如下:

>

.center {

height: 50px;

line-height: 50px;

}

使用行高line-height设置垂直居中只需要使行高和元素高度一样即可.

优点：使用方便，简单易懂；

缺点：元素内内容只能是文本和图片，而且文本和图片不能共存，不然效果差到恶心.

2、绝对定位和负边距是元素垂直居中.

代码如下:

>

.center {

position: absolute;

top: 50%;

height: 高度值;

margin: -(高度值/2);

}

优点：结果简单明了，使用方便；

缺点：由于固定高度，当文本内容超过限制时，将出现不可预料地情况.

3、使用display：table-cell 和 vertical-align 使元素垂直居中

代码如下:

>

.center {

display:table-cell; /*让元素以表格地单元素格形式渲染*/

vertical-align: middle; /*使用元素地垂直对齐*/

}

优点：适用范围广，简单易懂；

缺点：兼容性问题.

4、使用padding让元素内容垂直居中.

代码如下:

>

.center {

padding: 30px 10px;

}

不给容器固定高度，并在容器上下设置相同地padding值.

优点：简单易懂，结构清晰，并且兼容所有浏览器；

缺点：不能给容器固定高度.

：

更多信息请查看IT技术专栏