您的位置首页百科快答

如何将div中的内容垂直居中

如何将div中的内容垂直居中

的有关信息介绍如下:

如何将div中的内容垂直居中

首先我们准备好一个空的html结构的文档

接下来我们要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框

接下来我们就在div中添加内容,运行后你会发现内容偏向于左上角

下面我们给div设置水平居中,并且设置行高为div的高度,你会发现它水平垂直居中了

除了上面的方法外还有一种方法就是改变div的属性,让其display属性为table-cell,我们知道table单元格中可以通过vertical-align垂直居中,转化后也可以用此属性

但是运用display转化后你会发现margin的auto属性不起作用了,这种情况你可以根据浏览器设置居中或者运用bootstrap的栅栏系统进行布局

综上所述,将div的内容垂直居中主要2种方式,第一种是设置line-height,第二种是设置display为table-cell