DIV内容垂直居中 - MySomeDay
生活随笔
收集整理的這篇文章主要介紹了
DIV内容垂直居中 - MySomeDay
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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和按鈕的寬高都確定為具體像素值，可以直接設定按鈕的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中按鈕上下居中顯示
END
總結
以上是生活随笔為你收集整理的DIV内容垂直居中 - MySomeDay的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PostgreSQL快速入门(Sqoop
- 下一篇： 强制电脑关机的快捷键是什么？