你的位置:首页 > 网页设计

[网页设计]关于html水平垂直居中的一些总结吧

html水平垂直居中

最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便,0.0~~ 
1.居中文本

1 <div class="wrap">2    我在中间……3 </div>

1.1. height+line-height+text-center(只能居中单行)

1 .wrap{2   width:200px; 3   height:200px;4   border:1px solid red; 5   text-align: center;6   line-height: 200px;7 }

ps:text-align:center只是将元素下面的内联元素居中显示

1.2display:table-cell(多行固定高度居中)

1 .wrap{2   width:200px; 3   height:200px;4   border:1px solid red; 5   text-align: center; 6   display:table-cell; 7   vertical-align: middle;8 }

display:table-cell:ie67不管用,最好配合display:table;一起用ie67下:(以后也不用了,不过也放这儿吧)方法一:(通过em标签高度与父级等高,所以span和em居中就相当于span在父级居中)
1 <div class="wrap">2  <span>3     我在中间…… 我在中间…… 我在中间…… 我在中间……4  </span>5  <em></em>6 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   border:1px solid red;  5   text-align: center; 6 } 7 .wrap span{ 8   vertical-align: middle; 9   display:inline-block; 10   width:180px;11 }12 .wrap em{13   height:100%;14   vertical-align: middle; 15   display:inline-block;16 }

方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)
1 <div class="wrap">2   <span class="span1">3    <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>4   </span>5 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   border:1px solid red; 5   display:table; 6   position:relative;  7   overflow: hidden; 8 } 9 .wrap .span1{10   display:table-cell; 11   vertical-align: middle; 12   text-align: center;13   *position:absolute;14   top:50%;15   left:50%;16 }17 .wrap .span2{18   *position:relative;19   top:-50%;20   left:-50%;21 }

1.3padding(内填充,不用多说)

1 .wrap{2   width:200px;3   border:1px solid red;4   padding:50px 0;5 }

2.居中元素

1 <div class="wrap">2   <span></span>3 </div>

2.1position:absolute+margin负值(必须要有宽高,才能计算margin)

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red;10 }11 .wrap span{ 12   width:80px; 13   height:80px; 14   background:red;15   position: absolute; 16   top:50%; 17   left:50%; 18   margin-top:-40px; 19   margin-left:-40px;20 }

ps:position:absolute/fixed使内嵌支持宽高

2.2Position:absolute+margin:auto

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red;10 }11 .wrap span{ 12   width:80px; 13   height:80px; 14   background:red;15   position: absolute; 16   top:0;17   right:0;18   bottom:0;19   left:0;20   margin:auto;21 }

2.3position负值

1 <div class="wrap">2   <span class="span1">3    <span class="span2">fds</span>4   </span>5 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red; 10 }11 .wrap .span1{12   position:absolute;13   top:50%;14   left:50%;15   width:80px;16   height:80px;17 }18 .wrap .span2{ 19   width:80px;20   height:80px;21   display:block;22   line-height:80px;23   text-align:center;24   background:red; 25   position:relative;26   top:-50%;27   left:-50%;28 }

2.4transform: translate(-50%,-50%);(translate相对于自己偏移,不考虑兼容性的情况下,这个方法很好)

1 <div class="wrap">2    <span >fds</span>3 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red;10 }11 .wrap span{   12   width:80px;13   height:80px;14   background:red;15   position:absolute;16   top:50%;left:50%;17   -webkit-transform: translate(-50%,-50%);18   -ms-transform: translate(-50%,-50%);19   -o-transform: translate(-50%,-50%);20   transform: translate(-50%,-50%);21 } 

2.5并行一个标签

1 <div class="wrap">2  <span></span>3  <em></em>4 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red; 10   text-align: center;11 }12 .wrap span{13   width:80px;14   height:80px;15   background:red;16   display:inline-block; 17   vertical-align: middle;18 } 19 .wrap em{20   height:100%;21   vertical-align:middle; 22   display:inline-block;23 }

2.6display:table和display:table-cell

1 <div class="wrap">2   <div>3     <span></span>4   </div>5 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red; 10   display:table;11 }12 .wrap div{13   display:table-cell;14   vertical-align: middle;15   text-align: center;16 }17 .wrap span{ 18   width:80px;19   height:80px;20   background:red; 21   display:inline-block;22 } 

2.7display:box

1 <div class="wrap">2   <span >fds</span>3 </div>

 1 .wrap{ 2   width:200px;  3   height:200px; 4   position:absolute;  5   top:50%;  6   left:50%;  7   margin-top:-101px;  8   margin-left:-101px; 9   border:1px solid red; 10   display: -webkit-box;11   -webkit-box-pack:center;12   -webkit-box-align:center;13 }14 .wrap span{15   width:80px;16   height:80px;17   background:red;18   display:block;19 }

3.居中浮动元素

1 <div class="wrap">2   <ul>3     <li>fdasfd</li>4     <li>fdsfds</li>5     <li>fdfds</li>6   </ul>7 </div>

 1 .wrap{ 2   width:800px;  3   height:200px; 4   margin:200px auto; 5   border:1px solid red;  6   position:relative; 7   overflow: hidden; 8 } 9 .wrap ul{10   float: left; 11   position: relative; 12   left:50%;13   top:50%; 14   border:1px solid red; 15   height:100px; 16 }17 .wrap li{18   float: left; 19   width:100px; 20   height:100px; 21   background:red; 22   position: relative; 23   left:-50%;24   top:-50%; 25   margin-left:10px; 26   list-style: none; 27   _display:inline; /*ie6双边距*/28   *overflow: hidden;/*ie7下面不支持宽度*/29 }