如何设置一个div中的文字水平垂直居中

由于div 是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。 设置文字的padding，使其达到居中的效果。、 在文字外层，div内包裹一个标签，只是一段文字并将p标签的大小设置的与div标签同样大校再对p标

单纯的用css控制的话，有一下几个方法可以解决：

1、用padding给div设置内边距，让文字看上去是垂直居中的

2、实用table布局，td默认情况下是垂直居中，所以在div内插入table，再在td上设置text-align:center;就能控制文字垂直居中和水平居中

3、通过给文字设置line-height来达到垂直居中的效果，比如你想div高度是height:50px;但是却又没设定这个属性，那你就可以用line-height:50px;同样达到效果

使文字在div中水平和垂直居中的的css样式为

1

2

text-align:center; /水平居中/

line-height: 20px; /行距设为与div高度一致/

示例如下：

HTML元素

1

<div>水平垂直居中</div>

css样式

1

2

3

4

5

6

7

div{

width:200px;height:200px; /设置div的大小/

border:1px solid green; /边框/

text-align: center; /文字水平居中对齐/

line-height: 200px; /设置文字行距等于div的高度/

overflow:hidden;

}

显示效果

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

<div id="wrapper">

<div id="cell">

<div class="content">

Content goes here</div>

</div>

</div>

#wrapper {display:table;}

#cell {display:table-cell; vertical-align:middle;}

该文章转摘自-网页制作大宝库(wwwdabaokucom) - 原文链接：http://wwwdabaokucom/jiaocheng/wangye/css/20091002548shtml