一.水平居中
行内元素和块级元素不同,对于行内元素,只需在父元素中设置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 <!-- 行內元素居中只需在父元素中設置text-align即可 --> 3 3 <div class="father"> 4 4 <p class="blockCenter"> 5 5 hehe</p> 6 6 </div> 7 7 <!-- table居中 --> 8 8 <table class="tableclass"> 9 9 <tr> 10 10 <td> 11 11 <ul class="ulclass"> 12 12 <li><a href="#">呵</a></li> 13 13 </ul> 14 14 </td> 15 15 </tr> 16 16 </table> 17 17 <table class="tableclass"> 18 18 <tr> 19 19 <td> 20 20 <ul class="ulclass"> 21 21 <li><a href="#">呵</a></li> 22 22 <li><a href="#">呵</a></li> 23 23 <li><a href="#">呵</a></li> 24 24 </ul> 25 25 </td> 26 26 </tr> 27 27 </table> 28 28 <table class="tableclass"> 29 29 <tr> 30 30 <td> 31 31 <ul class="ulclass"> 32 32 <li><a href="#">呵</a></li> 33 33 <li><a href="#">呵</a></li> 34 34 <li><a href="#">呵</a></li> 35 35 <li><a href="#">呵</a></li> 36 36 <li><a href="#">呵</a></li> 37 37 </ul> 38 38 </td> 39 39 </tr> 40 40 </table> 41 41 <!-- 將塊級元素變為行內元素在居中 --> 42 42 <ul style="{text-align: center}"> 43 43 <li style="{display: inline}">nihao </li> 44 44 </ul> 45 45 <!-- 利用相對佈局 --> 46 46 <ul class="relativeCenterFather"> 47 47 <li class="relativeCenterChild">你好 </li> 48 48 </ul> 49 49 50 50 <!-- 豎直居中--> 51 51 <!-- 1.設置相同的上下padding --> 52 52 <!-- 2.父元素height和line-height相同 --> 53 53 <hr /> 54 54 <div style={background:#000;500px;color:#fff;line-height:100px;text-align:center}> 55 55 我要來場說走就走的旅行 56 56 </div> 57 57 <!--3. vartical-align,這屬性只對tr,td起作用 --> 58 58 <table> 59 59 <tr verticla-align="center" height="100" background="#FF00FF"> 60 60 <td>一弦一柱思華年</td> 61 61 </tr> 62 62 </table>
css样式
1 <style type="text/css"> 2 .father 3 { 4 width:500px; 5 } 6 .inlineCenter 7 { 8 text-align:center; 9 float:left; 10 } 11 .blockCenter 12 { 13 width:100px; 14 margin-left:auto; 15 margin-right:auto; 16 text-align:"center" 17 } 18 .tableclass 19 { 20 margin-left:auto; 21 margin-right:auto; 22 } 23 .ulclass 24 { 25 list-style:none; 26 margin:0; 27 padding:0; 28 } 29 .ulclass li 30 { 31 float:left; 32 display:inline; 33 text-align:center; 34 } 35 .ulclass li a 36 { 37 text-align:center; 38 float:left; 39 background:#316AC5; 40 color:#fff; 41 } 42 .ulclass li a:hover 43 { 44 background:#fff; 45 color:#316AC5; 46 } 47 48 49 .relativeCenterFather 50 { 51 float:left; 52 position:relative; 53 left:50% 54 } 55 .relativeCenterChild 56 { 57 float:left; 58 position:relative; 59 left:-50%; 60 } 61 62 63 /* 豎直居中*/ 64 .wrap 65 { 66 background:#000; 67 width:500px; 68 color:#fff; 69 height:100px; 70 line-height:100px; 71 } 72 </style>