DIV内容垂直居中_html/css_WEB-ITnose

css垂直居中属性设置vertical-align: middle对div不起作用，例如：

 1  2  3  4  5  6  7 35 36 37     
38         在DIV中垂直居中39     
40 41 

运行后按钮没有在DIV中垂直居中：

解决思路：如果div和按钮的宽高都确定为具体像素值，可以直接设定按钮的css属性：position：relative; top为(div.height - button.height)/2，left为(div.width-button.height)/2；否则给按钮添加一个div父元素，宽高和按钮相 同，position设定为relative，top和left都为50%（即左上角位置设定在外层div的中心），再将按钮左上角位置坐标设定为父元素 div宽高（也等于按钮自身宽高）的-50%

详细代码如下：

 1  2  3  4  5  6  7 45 46 47     
48         
49             在DIV中垂直居中50         
51     
52 53 

再次运行后，div中按钮上下居中显示

END