iv块级元素代表span行内元素代表中的文字如何水平垂直都居中呢实现方法如下

html

换成其他块级元素如p或h1~h6时以下方法仍然奏效。

但当把div换成行内元素如span时第4种方法将失效。

1、弹性布局

设置line-height的值和为div的height值实现垂直居中使用text-align实现水平居中。

该方法只能使用于单行文本如文本超过单行文字将会溢出。

且该方法不适用于span等行内元素

200px;width:

classcontainer文字居中显示文字居中显示文字居中显示/div

/body

当用该方法用于span等行内元素时为span设置的宽高将失效因为默认情况下行内元素无法设置宽度和高度其宽度和高度都是由它们所包含的内容决定的。

有关html块级元素、行内元素、行内块级元素的说明请看该篇博文HTML

块级元素、行内元素和行内块级元素

要想让span等行内元素也实现div的效果使用displayblock

displayinline-block

相同高度即可实现垂直居中。

当要求固定高度时先看文字的高度然后再计算出

padding-top

center;padding-top:50px;padding-bottom:50px;}

/style

要根据div高度减去文字高度再平分剩余的高度假如文字高度占20px,那么padding-top、padding-bottom

200px;border:

center;padding-top:90px;padding-bottom:90px;}

/style

div找那个元素居中和本篇html元素居中的方法综合实现子div在父div中居中显示并且子div中的文字居中

headmeta

/title/titlestyle.container{height:

300px;width:

中可使用上述第1,第3,第4第5种方法实现组合文字居中第2种display:

table-cell讲失效

以上方法如有错误请各位不吝指教如以后有别的方法将会往下继续添加各位有其他方法可留言告知。