CSS中各种各样居中方法的总结

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在开发前端页面的时候，元素的居中是一个永远都绕不开的问题。看似简单的居中二字，其实蕴含着许许多多的情况，对应着很多的处理方法，本文就试图对页面布局中的居中问题进行总结~~

居中问题分为水平居中和竖直居中两种；而根据所居中元素的不同，有内联元素居中和块级元素居中两种居中问题。下面开始分类整理：

一、内联元素的居中

1、内联元素的水平居中：在父元素上设置text-align:center;

（为了节省空间、突出重点，每个选择器中无关紧要的样式我都会全部写在第一行，从第二行开始是关键样式~ 下同）

2、单行内联元素的竖直居中：设置内联元素的行高等于容器的高度

3、多行内联元素的竖直居中：用具有块级属性的容器包裹起来，然后应用下方块级元素的相关方法。

二、块级元素的居中

1、块级元素的水平居中：设置居中元素的margin属性： margin: 0 auto;

2、高度固定的块级元素的竖直居中：相对于父元素进行绝对定位，设置top:50%;并设置margin属性为自身高度一半的负值：

原理：设置了top:50%;之后，该元素的上边沿正好在父元素的中心上，此时让这个元素向上方移动自身高度的一半，就可以使这个元素的中心与父元素的中心重合，达到竖直居中的效果。此原理也可应用至水平居中的应用上。

3、高度可变的块级元素的竖直居中：利用display:table-cell，利用表格中的竖直居中来实现。(此方法不兼容IE7及以下版本的浏览器)

4、容器高度不固定元素的竖直居中：手动设置内部元素的上下边距相等

三、块级内联元素的居中

1、水平居中：方法等同内联元素的水平居中方法

2、竖直居中：方法等同块级元素的竖直居中方法

四、各种不寻常的居中方法

上面所述的都是面对那些分类情况中第一时间应当想到的寻常方法，在居中问题中还有很多原理不寻常的方法，下面尝试进行总结（有的方法上面已经有所应用）

1、利用display:table-cell进行布局：

我们都知道，表格中提供了非常方便的居中属性，在DIV+CSS布局还未到来的时代，居中对于前端人员来说（那时似乎也没有前端这个职位23333）并不是个问题。但是在web的新时代中，再使用table进行大布局就显得有些XXXX了。还好新版的CSS为我们提供了display：table-cell的选项，使得一个普通的div也可以表现的像一个表格单元格，从而可以通过直接设置text-align:center; vertival-align:middle;通杀一切居中的效果（块级元素水平居中需在块级元素上加margin:
0 auto;）。这使得table-cell成为了新一个布局神器，然而因为兼容性问题，所以这个方法似乎还没有太大规模的使用。

2、使用绝对定位+负边距的方法：

这种方法的原理在前面“高度固定的块级元素的竖直居中”部分已经有介绍。在水平居中中同样可以使用，将相应属性换成水平方向的对应属性即可。这种方法的缺点在于，需要预先知道居中元素的宽高，不适用于宽高可变的元素。

3、使用绝对定位+transform的方法：

这种方法是对上方负边距方法的一个改进。一般来说，CSS中距离单位使用百分比时，都是根据父元素的宽高来计算的。而transform：translate()方法在使用百分比单位时，是以自身的宽高进行计算的，这就弥补了负边距方法中“必须预先获知元素宽高”这一缺陷了。

当然，缺陷也很明显：translate是CSS3中的内容，并不兼容IE6、7、8。（手动冷漠脸）

4、使用绝对定位+auto边距的方法：

使居中元素相对于其父元素绝对定位，设置居中方向上的偏移值为0（两方向都要设置），然后设置居中方向上的margin值为auto（同样两个方向都要设置），即可实现居中。下图为水平竖直居中的例子。

这种方法有两个负作用：1、居中元素的盒模型中margin部分会填充整个父容器，可能会影响同等级其他元素的布局。

2、不能用于高度可变元素。例如对一个高度可变的内容容器使用本方法，其高度会自动拉伸至100%，失去高度随内容自适应的性质。

5、浮动元素的水平居中

对于一群浮动元素的居中，可以使用以下办法：精确计算浮动元素的总宽度及边距，设置一个宽度等与此值的块级容器，使得浮动元素在此容器内浮动，而此容器相对原先的父容器水平居中。

对于单个浮动元素的居中。。。。。。就剩一个元素了还浮动个毛线！

6、一种非常奇怪的方法。。。使用font-size实现竖直居中

居然还能用这个？？？？？？

这种方法仅仅在IE6和IE7中有效，可以看作对table-cell方法的补充。在高度固定的父元素中，设置font-size的值为高度除以1.14得到的值（手动十个尼克杨问号脸），子元素为内联或块级内联元素并设置vertical-align:middle，可以实现竖直居中。

下面是这个方法与table-cell方法的结合，使用了css hack，可以兼容所有浏览器。

7、引入新的不可见元素实现居中

这种方法的原理和上面提到的绝对定位系列方法是类似的。对于单个高度（宽度）固定的元素，可以在同级添加一个div，设置其高度为50%，并设置下边距为居中元素高度一半的负值（这里替换成上面给居中元素设置的负边距或者translate都可以），即可完成居中效果：

当然，这里面的#another也可以通过伪元素实现：

需要注意的是，使用此方法实现水平居中时，需要给两个子div和伪元素设置display:inline-block样式，否则块级元素自带的换行效果会使得这种方法失效。

来做一个小的总结吧。在页面布局的时候，使用CSS进行居中操作，根据情况的不同，有着各种各样不同的方法。而这些各种各样的方法，也都有着各种各样的优劣，有的需要提前确定元素的宽高，有的存在兼容性问题。这就需要我们在开发的过程中，根据实际情况灵活选用方法，并加以自己的修改，方可实现各种居中~~上面这些方法已经足够应对大部分场景，如果遇到了更加奇妙的方法，我也会更新这篇博文与大家分享的~