CSS居中

最近在看编写高质量代码--Web前端开发修炼之道一书，发现里面有很多东西是以前不知道或则不熟悉的，希望把它记录下来.

1.水平居中

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

给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中，代码如下：

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

确定宽度的块级元素的水平居中是通过设置margin-left:auto和margin-right:auto来实现的，代码如下：

（3）不确定宽度的块级元素的水平居中
不确定宽度的块级元素有三种方式实现水平居中。

方法二：

方法三：

2.竖直居中

（1）父元素高度不确定的文本、图片、块级元素的竖直居中
父元素高度不确定的文本、图片、块级元素的竖直居中是可以通过给父元素设置相同上下边距实现。代码如下：

父元素高度确定的单行文本竖直居中是通过给父元素设置line-height来实现的，line-height值和父元素的高度值相同。