欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-19 12:02:09
...
css垂直居中属性设置vertical-align: middle对div不起作用,例如:

 1  2  3  4  5  6 DIV垂直居中对齐 7 35 36 37     
38 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 DIV垂直居中对齐 7 45 46 47     
48
49 50
51
52 53

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

END

相关标签: DIV内容垂直居中