CSS--文字图片水平垂直居中

一、首先要了解行内元素和块级元素在居中时是不一样的，常用的行内元素(内联元素）有a标签，b粗体，br换行,em强调,font设置字体,i斜体,img图片,input输入,span常用内敛容器,label表格标签,strong强调,strike中划线等；常用块级元素有div,dl与dt,dd搭配使用的块级元素，form表单,ol非排序,ul排序表单,h1标题,hr水平分割线等，其次行内元素和块级元素之间可以通过display相互转化的

二、居中方法

1、块级元素文字水平居中，text-align使得文字或图片在水平方向居中，注意：在div中设置的text-align不仅可以在此div种的文字和图片居中而且还可以让子div中的图片或文字在子div中居中，这个地方注意哦，是子div中的文字是相对于子div居中

 

 2、块级元素文字垂直居中（块级元素高度确定的情况），将块级元素的height与line-height相同即可

3、块级元素文字水平居中（块级元素高度不确定的情况），设置padding-top、padding-bottom

4、块级元素自身的居中（确定了宽度的块）设置margin:0 auto 这会使得这个块级元素在它的父元素中上下左右都会居中，水平居中的话设置margin-left:auto;margin-right:auto

5、块级元素自身的居中（不确定宽度的块）如果不确定宽度的块此时这个块及时浏览器窗口的宽度，不必要设置水平居中。

6、<td><tr>居中：vertical-align:middle;使得文字或者图片紧靠他们的父元素进行居中的

7、行内元素的垂直居中：设置display：table-cell;vertical-align:middle;