HTML 元素居中的方法

网址：http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html

1. 元素的定位的方法选择 ：absolute 。

2. 给定元素的宽和高。

3.因为是absolute定位的方法， 用百分比的方法，借用left和top的属性，将元素的左上顶点的坐标定位到屏幕的中心。

4. 矫正图片的位置，margin-top和margin-left可以为负数时的属性作用，将margin-left和margin-top的值，分别定位元素宽和高的值的一半，并取为负数。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>                
 5         <title>Hello The World!</title>
 6         <link href="css/main.css" rel="stylesheet" type="text/css" />
 7         <style>
 8             #feeling{
 9                 background-color: #0000CD;
10                 position: absolute;
11                 width: 800px;
12                 height: 600px;
13                 top: 50%;
14                 left: 50%;
15                 margin-top: -300px;
16                 margin-left: -400px;
17             }
18         </style>
19     </head>
20     <body>
21         <id id="feeling">
22         </id>
23     </body>
24 </html>

 

posted @ 2017-03-16 22:04  GoodByeZ  阅读(284)  评论(0)  编辑  收藏  举报