您的当前位置：首页正文

DIV内容垂直居中-MySomeDay

2020-11-27 来源：爱go旅游网

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