1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8"/>
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6 <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
7 <!-- 自定义网页信息 -->
8 <title>CSS居中demo</title>
9 <link rel="shortcut icon" href=" " />
10 <base target="_blank" href=" " />
11 <meta name="description" content=" " />
12 <meta name="keywords" content=" " />
13 <meta name="Copyright" content=" " />
14 <meta name="author" content="Pich" />
15 <!-- 外链样式表和脚本 -->
16 <link rel="stylesheet" type="text/css" href = " ">
17 <script type="text/javascript" src = " "></script>
18 <style>
19 * { margin: 0; padding: 0; }
20 /*公共样式*/
21 blockquote { text-align: center;background-color: #aaa; width: 50%;margin: 0 auto}
22 div { width: 70%; height: 100px; margin: 2% auto; background-color: #ccc; }
23 p { color: #c00; }
24 /*第1种垂直居中样式*/
25 .vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; }
26 /*第2种垂直居中样式*/
27 .vertical-2 p { line-height: 100px; text-align: center; }
28 /*第3种垂直居中样式*/
29 .vertical-3 { display: table; }
30 .vertical-3 p { vertical-align: middle; display: table-cell; text-align: center; }
31 /*第4种垂直居中样式*/
32 .vertical-4 { position: relative; }
33 .vertical-4 p { position: absolute; top: 40%; left: 25%; height: 20%; width: 50%; }
34 /*第5种垂直居中样式*/
35 .vertical-5 { position: relative; }
36 .vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 20%; margin: auto; }
37 /*第6种垂直居中样式*/
38 .vertical-6 { padding: 2% 0; height: auto;}
39 .vertical-6 p { display: block; padding: 4% 0; text-align: center; }
40 /*****************************************************************************************************/
41 /*第1种水平居中样式*/
42 .level-1{}
43 .level-1 p{margin-right: auto;margin-left: auto; width: 150px;text-align: center;line-height: 100px}
44 /*第2种水平居中样式*/
45 .level-2{text-align: center;}
46 .level-2 p{display: inline-block;width: 80%; }
47 /*第3种水平居中样式*/
48 .level-3{ }
49 .level-3 p{ position:absolute; left:50%; width:700px; margin-left:-350px}
50
51 </style>
52 </head>
53 <body>
54 <!-- 页面主体 -->
55 <h1 style="text-align: center;color: #c00;">凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。</h1>
56 <br><br><br><br>
57 <blockquote>
58 /*第1种垂直居中样式*/<br>.vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; }
59 </blockquote>
60 <div class="vertical-1">
61 <img src="1.png" alt="">
62 </div>
63 <blockquote>
64 /*第2种垂直居中样式*/<br>.vertical-1 p { line-height: 100px; }
65 </blockquote>
66 <div class="vertical-2">
67 <p>垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2</p>
68 </div>
69 <blockquote>
70 /*第2种垂直居中样式*/<br>.vertical-1 p{line-height: 100px;}
71 </blockquote>
72 <div class="vertical-3">
73 <p>垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3</p>
74 </div>
75 <blockquote>
76 /*第3种垂直居中样式*/<br>.vertical-3 { display: table; }<br>.vertical-3 p { vertical-align: middle; display: table-cell; }
77 </blockquote>
78 <div class="vertical-4">
79 <p>垂直居中实例4,注：vertical-align:middle这个属性一般情况下只对行内元素生效，对块级元素只有table-cell生效。</p>
80 </div>
81 <blockquote>
82 /*第5种垂直居中样式*/<br>.vertical-5 { position: relative; }<br>.vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 20%; margin: auto; }
83 </blockquote>
84 <div class="vertical-5">
85 <p>垂直居中实例5适用：块级元素 但在IE版本低于7时不能正常工作</p>
86 </div>
87 <blockquote>
88 /*第6种垂直居中样式*/<br>.vertical-6 { padding: 2% 0; height: auto;}<br>.vertical-6 p { display: block; padding: 4% 0; }
89 </blockquote>
90 <div class="vertical-6">
91 <p>垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6</p>
92 </div>
93 <!-- ***************************************************************************************************** -->
94 <blockquote>
95 /*第1种水平居中样式:自动外边距实现居中*/<br>.level-1{}<br>.level-1 p{margin-right: auto;margin-left: auto; width: 150px;text-align: center;line-height: 100px}
96 </blockquote>
97 <div class="level-1">
98 <p>水平居中参考实例1</p>
99 </div>
100 <blockquote>
101 /*第2种水平居中样式*/<br>.level-1{text-align:center;}<br>.level-2 p{display: inline-block;background: #c00;width: 80%; }
102 </blockquote>
103 <div class="level-2">
104 <p>使用text-align属性，应用到body元素上即可。它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。在创建好布局必须的div之后，为body应用text-align属性：body的所有子孙元素都会被居中显示。我们就需要用再写一条规则，让其中的文本回到默认的居左对齐.另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。</p>
105 </div>
106 <blockquote>
107 /*第3种水平居中样式*/<br>.level-3{ }<br>.level-3 p{ position:absolute; left:50%; width:700px; margin-left:-350px}
108 </blockquote>
109 <div class="level-3">
110 <p>创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点</p>
111 </div>
112 </body>
113 </html>
114 <!--
115 made with ♥ by:
116 _
117 _ |_| _
118 |_| _____ |_|
119 _ / \ _
120 |_| / ____ \ |_|
121 / / \ \
122 / / \ \
123 |\___/ \/
124 \
125 \ /
126 \ /
127 | |
128 | |
129 \_____/
130 -->
浙公网安备 33010602011771号