首页 / HTML / DIV内容垂直居中-MySomeDay

DIV内容垂直居中-MySomeDay

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了DIV内容垂直居中-MySomeDay，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2290字，纯文字阅读大概需要4分钟。

内容图文

css垂直居中属性设置vertical-align: middle对div不起作用，例如： 
 1 DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Commpatible" content="IE=edge">
 6 <title>DIV垂直居中对齐</title>
 7 <style type="text/css">
 8 * {
 9     margin: 0;
10     padding: 0;
11 }
12 
13 html, body {
14     width: 100%;
15     height: 100%;
16 }
17 
18 body {text-align: center; vertical-align: middle;}
19 .outer {
20     width: 400px;
21     height: 120px;
22     position: relative;
23     left: 20px;
24     top: 20px;
25     text-align: center;
26     vertical-align: middle;
27     border: 1px dashed blue;
28 }
29 
30 .button {
31     width: 200px;
32     height: 40px;
33 }
34 </style>
35 </head>
36 <body>
37     <div class='outer'>
38         <button class='button'>在DIV中垂直居中</button>
39     </div>
40 </body>
41 </html>

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

DIV内容垂直居中-MySomeDay - 文章图片

解决思路：如果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 DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Commpatible" content="IE=edge">
 6 <title>DIV垂直居中对齐</title>
 7 <style type="text/css">
 8 * {
 9     margin: 0;
10     padding: 0;
11 }
12 
13 html, body {
14     width: 100%;
15     height: 100%;
16 }
17 
18 body {text-align: center; vertical-align: middle;}
19 .outer {
20     width: 400px;/* 或者为百分比 */
21     height: 120px;
22     position: relative;
23     left: 20px;
24     top: 20px;
25     border: 1px dashed blue;
26 }
27 
28 .inner {
29     width: 200px;
30     height: 40px;
31     position: relative;
32     position: relative;
33     top: 50%;
34     left: 50%;
35 }
36 
37 .button {
38     width: 200px;
39     height: 40px;
40     position: relative;
41     top: -50%;
42     left: -50%;
43 }
44 </style>
45 </head>
46 <body>
47     <div class='outer'>
48         <div class='inner'>
49             <button class='button'>在DIV中垂直居中</button>
50         </div>
51     </div>
52 </body>
53 </html>

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

DIV内容垂直居中-MySomeDay - 文章图片

END

内容总结

以上是互联网集市为您收集整理的DIV内容垂直居中-MySomeDay全部内容，希望文章能够帮你解决DIV内容垂直居中-MySomeDay所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408677.html

来源：【匿名】