css居中总结

朱雀 2022-06-10 08:57 200阅读 0赞

# css居中总结 #

在页面的设计中，经常会需要将某个元素或者模块居中，下面就总结一下这种常见的布局方式。(由于都是居中，就不放图了)

## 1. 水平居中 ##

### 1. 使用text-align:center和display:inline-block实现 ###

.parent { text-align:center; }
    .child { display:inline-block; }

方便理解的话，可以分为两个步骤，首先使用display:inline-block将元素设置为可被text-align控制的内联块级元素，然后使用text-align属性控制这个元素进行居中。

*  优点：兼容性好
 *  缺点：需要同时设置子元素和父元素

需要**注意**的是：在使用inline-block时，会产生一个缝隙，对布局会造成一些微小的影响，从而影响到页面的美观，这是[解决方法][Link 1]

### 2. 使用margin：0 auto实现 ###

.child{ width:100px; margin:0 auto; }

很简单的居中方式，不多做解释。

*  优点：兼容性好，简单
 *  缺点：只能用于固定宽度的元素。(固定宽度有些欠妥，因为宽度为%的元素也可以使用这个方法居中，但是没有想到什么更好的词)

### 3. 使用display：table实现 ###

child { display:table; margin: 0 auto; }

display:table 这个属性，我没有用过，只知道可以通过这个属性来进行布局。虽然w3c中介绍说display:table可以使得元素就像`<table>` 元素一样，定义一个块级盒子，但是还是有区别的，首先在语义上就是不一样而定，而且产生的实际效果也是不一样的。

*  优点：只需要对自身设置
 *  缺点：兼容性不好，IE6,7需要调整

### 4. 使用绝对定位实现： ###

.child { position:absolute; witdh:20%; left:50%; margin-left:-10%; }

使用margin的负值来进行居中，原理是先把元素向右移动父元素的50%，然后使用margin的负值向左移动回来该元素宽度的一半。

*  优点：兼容性好，并且不会对其他元素造成影响，会脱离文档流
 *  缺点：需要父元素不是static元素(即元素的position属性值不是static)，并且需要知道元素的宽度。(如果知道元素宽度了直接用margin：0 auto了，谁还会用这个。。)

其实还有一种使用css3的实现方法：

.child { position:absolute; left:50%; transform:translate(-50%); }

transform属性是用来旋转元素的，但是通过translate()进行的是2D的转换，translate()有两个参数，一个是控制x轴的相对移动，第二个是控制y轴的相对移动，所以当传入-50%的时候，就会向左移动该元素的一半，达到和margin的负值一样的效果，并且不需要知道元素的宽度。

*  优点：不需要知道元素的宽度
 *  缺点：需要父元素为非static元素，并且兼容性不太好

除了这些以外，还有一些使用css3标准的实现方法，比如说：

**使用flex布局实现**

.parent { display:flex; justify-content:center; }

.parent { display:flex; }
    .child { margin:0 auto; }

这些布局方法不太了解，在此不详细介绍了。但是由于是css3新添加的，所以可想而知，兼容性不会太好。

## 2. 垂直居中 ##

### 1. 使用table-cell实现 ###

.parent { display:table-cell; vertical-align:middle; }

上述布局会造成子元素相对于父元素垂直居中。

*  优点：子元素和父元素都不需要知道高度
 *  缺点：低版本IE不兼容，当文本较多时，会造成文本的溢出，并且不可以通过overflow：hidden隐藏
    
    因此适用于较少的文字或者文字数量固定的情况

### 2. 使用绝对布局实现： ###

.parent { position:relative; }
    .child { position:absolute; top:50%; height:100px; margin-top:-50px; }

和使用绝对布局的水平居中的原理相同，都是使用margin的负值。

*  优点：兼容性好
 *  缺点：需要父元素是非static的，并且需要知道子元素的高度

类比水平居中，也有一个使用css3中的transform进行居中的方法：

.parent { position:relative; }
    .child { position:aboslute; top:50%;/*百分比参照物是父元素*/ transform:translate(0,-50%);/*百分比参照物是自身*/ }

*  优点：不需要知道子元素的高度
 *  缺点：兼容性不是很好，需要父元素是非static元素

### 3. 使用flex实现 ###

.parent { display:flex; }
    .child { margin: auto 0; }

.parent { display:flex; aligin-items:center; }

*  优点：简单
 *  缺点：兼容性差

还有一些在子元素前或者后添加元素的方法，感觉这种方法会对界面造成影响，并且违反了语义化规则，想了解的同学可以去看[这个][Link 2]

## 3. 水平垂直居中 ##

基本上就是前面两种的结合

### 1. 11结合，使用table-cell和inline-block实现 ###

.parent { display:table-cell;/*用于垂直居中*/ vertical-align:middle; text-algin-center;/*用于水平居中*/ } .child { display:inline-block;/*用于水平居中*/ }

### 2. 21结合，使用margin：0 auto和table-cell实现 ###

.parent { display:table-cell; vertical-align:middle; }
    .child { margin0 auto; }

### 3. 31结合，使用table-cell和table实现(感觉怪怪的) ###

总感觉怪怪的，父元素是table-cell而子元素是table，不过经过测试确实可以用。。

.parent { display:table-cell; vertical-align:middle; }
    .child { display:table; margin:0 auto; }

### 4. 使用绝对布局来实现 ###

.parent { position:relative; }
    .child { height:200px; width;200px; position:aboslute; top:50%; left:50%; margin-left:-100px; margin-top:-100px; }

或者使用transform：translate();和使用margin的负值原理相同。

### 5. 使用flex实现 ###

.parent { display:flex; justify-content:center; align-items:center; }

看起来很简洁，不过兼容性不太好

## 总结： ##

总结下来的话，实现居中基本上就那几种方法，使用转化为inline-block然后使用text-align；或者display：table或table-cell，然后居中；或者使用绝对布局然后使用margin的负值居中；或者使用css3用flex来布局。以上就是我总结的居中方法，可能不太完善或者有些问题，欢迎指点。

参考资料：[利用HTML和CSS实现常见的布局][HTML_CSS]

[Link 1]: http://www.cnblogs.com/libin-1/p/6137114.html
[Link 2]: http://www.cnblogs.com/Yirannnnnn/p/4933332.html#3298035
[HTML_CSS]: https://segmentfault.com/a/1190000003931851