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中在居中
源码
11 <!-- ⽔平居中 -->
22    <!-- ⾏內元素居中只需在⽗元素中設置text-align即可 -->
33    <div class="father">
44        <p class="blockCenter">
55            hehe</p>
66    </div>
77    <!-- table居中 -->
88    <table class="tableclass">
99        <tr>
1010            <td>
1111                <ul class="ulclass">
1212                    <li><a href="#">呵</a></li>
1313                </ul>
1414            </td>
1515        </tr>
1616    </table>
1717    <table class="tableclass">
1818        <tr>
1919            <td>
2020                <ul class="ulclass">
2121                    <li><a href="#">呵</a></li>
2222                    <li><a href="#">呵</a></li>
2323                    <li><a href="#">呵</a></li>
2424                </ul>
2525            </td>
2626        </tr>
2727    </table>
2828    <table class="tableclass">
2929        <tr>
3030            <td>
3131                <ul class="ulclass">
3232                    <li><a href="#">呵</a></li>
3333                    <li><a href="#">呵</a></li>
3434                    <li><a href="#">呵</a></li>
3535                    <li><a href="#">呵</a></li>
3636                    <li><a href="#">呵</a></li>
3737                </ul>
3838            </td>
3939        </tr>
4040    </table>
4141    <!-- 將塊級元素變為⾏內元素在居中 -->
4242    <ul >
4343        <li >nihao </li>
4444    </ul>
4545    <!-- 利⽤相對佈局 -->
4646    <ul class="relativeCenterFather">
4747        <li class="relativeCenterChild">你好 </li>
4848    </ul>
5050    <!-- 豎直居中-->
5151    <!-- 1.設置相同的上下padding -->
5252    <!--  2.⽗元素height和line-height相同 -->
5353    <hr />
5454    <div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}> 5555我要來場說⾛就⾛的旅⾏
5656    </div>
5757    <!--3. vartical-align，這屬性只對tr,td起作⽤ -->
5858    <table>
5959        <tr verticla-align="center" height="100" background="#FF00FF">
6060            <td>⼀弦⼀柱思華年</td>
6161        </tr>
6262    </table>
View Code
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        }
div中的div居中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%;
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。