CSS水平居中和垂直居方法

CSS水平居中和垂直居方法详细介绍

在做网站布局时，很多情况下要实现元素区块的水平或垂直居中。但有时设置了居中的方法并不起作用，这可能是我们对css居中的知识没有完全掌握。css的居中有多种方式，下面就来一一介绍介绍。

一、水平居中

（1）文本、图片等行内元素的水平居中

直接给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

（2）确定宽度的块级元素的水平居中

通过设置margin：0 auto实现水平居中

（3）不确定宽度的块级元素的水平居中

三种方式可以实现不确定宽度的块级元素水平居中

方法一：使用table标签间接实现内部元素区块的水平居中

非常有趣的是table本身并不是块级元素，如果不设置宽度，它的宽度就由内部元素决定，只要给table设置margin：0 auto就可以实现水平居中，从而间接达到内部元素的水平居中。但这种方法缺点是增加了无语义标签，加深了标签的嵌套层数。

方法二：转化块级元素的类型

通过使用display将block类型的元素转化为inline类型的元素，然后使用text-align来实现水平居中。与方法一相比，它的好处是不用增加无语义标签，简化了标签的嵌套层次。但转化后的行内元素比块级元素缺少了某些功能，比如长宽值设置无效。

方法三：利用浮动和相对定位来实现水平居中

首先给父元素设置float并设置position：relative和left:50%，然后给子元素设置position：relative和left:-50%来实现水平居中。

这种方法的优点是不会改变块级元素的类型，并且不会添加无语义标签，，不会增加嵌套层次；缺点是设置了position：relative，带来一定的副作用。

这三种方法使用比较多，各有优缺点，具体选用哪种方式可以视情况而定。

二、垂直居中

（1）父元素高度不确定的文本、图片、块级元素的垂直居中

通过给父容器设置相同上下内边距来实现垂直居中。

（2）父元素高度确定的单行文本的垂直居中

通过给父元素设置height和line-height来实现垂直居中，注意高度值和行高值相同。

(3)父元素高度确定的多行文本、图片、块级元素的垂直居中

css中有一个用于垂直居中的属性vertical-align:middle，只有将元素转化inline-block类型才能生效。但td标签默认情况下就隐式地设置了vertical的值为middle，所以不需要再显示地设置一次。

,