CSS行内元素和块级元素的居中_html/css_WEB-ITnose

　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;

　　对于块级元素有以下几种居中方式:　　

　　1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;　　

　　2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;　　

　　3.设置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相对布局的方式居中.上面三种方式各有优劣,依使用情景具体选择.

二.垂直居中　　

　　1.对于知道高度的元素可以设置上下padding相等;　　

　　2.设置line-height和height相等　　

　　3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中

源码

 1  1  2  2      3  3     
 4  4         
 5  5             hehe
 6  6     
 7  7      8  8      9  9         10 10             15 15         16 16     
11 11                 
12 12                     
呵
13 13                 
14 14             
17 17     18 18         19 19             26 26         27 27     
20 20                 
21 21                     
呵
22 22                     
呵
23 23                     
呵
24 24                 
25 25             
28 28     29 29         30 30             39 39         40 40     
31 31                 
32 32                     
呵
33 33                     
呵
34 34                     
呵
35 35                     
呵
36 36                     
呵
37 37                 
38 38             
41 41     42 42     
43 43         
nihao 
44 44     
45 45     46 46     
47 47         
你好 
48 48     
49 49     50 50     51 51     52 52     53 53     
54 54     
55 55         我要???走就走的旅行56 56     
57 57     58 58     59 59         60 60             61 61         62 62     
一弦一柱思?年

css样式

 1