CSS行内元素和块级元素的居中_html/css

　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置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