关于html水平垂直居中的一些总结吧

html水平垂直居中

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

 <div class="wrap">

       我在中间……

 </div>

1.1. height+line-height+text-center（只能居中单行）

 .wrap{

     width:200px;

     height:200px;

     border:1px solid red;

     text-align: center;

     line-height: 200px;

 }

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

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

 .wrap{

     width:200px;

     height:200px;

     border:1px solid red;

     text-align: center;

     display:table-cell;

     vertical-align: middle;

 }

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67下：（以后也不用了，不过也放这儿吧）

方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）

 <div class="wrap">

    <span>

        我在中间…… 我在中间…… 我在中间…… 我在中间……

    </span>

    <em></em>

 </div>

 .wrap{

     width:200px;

     height:200px;

     border:1px solid red;

     text-align: center;

 }

 .wrap span{

     vertical-align: middle;

     display:inline-block;

     width:180px;

 }

 .wrap em{

     height:100%;

     vertical-align: middle;

     display:inline-block;

 }

方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中）

 <div class="wrap">

     <span class="span1">

        <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>

     </span>

 </div>

 .wrap{

     width:200px;

     height:200px;

     border:1px solid red;

     display:table;

     position:relative;

     overflow: hidden;

 }

 .wrap .span1{

     display:table-cell;

     vertical-align: middle;

     text-align: center;

     *position:absolute;

     top:50%;

     left:50%;

 }

 .wrap .span2{

     *position:relative;

     top:-50%;

     left:-50%;

 }

1.3padding（内填充，不用多说）

 .wrap{

     width:200px;

     border:1px solid red;

     padding:50px 0;

 }

2.居中元素

 <div class="wrap">

     <span></span>

 </div>

2.1position:absolute+margin负值（必须要有宽高，才能计算margin）

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     position: absolute;

     top:50%;

     left:50%;

     margin-top:-40px;

     margin-left:-40px;

 }

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

2.2Position:absolute+margin:auto

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     position: absolute;

     top:;

     right:;

     bottom:;

     left:;

     margin:auto;

 }

2.3position负值

 <div class="wrap">

     <span class="span1">

        <span class="span2">fds</span>

     </span>

 </div>

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

 }

 .wrap .span1{

     position:absolute;

     top:50%;

     left:50%;

     width:80px;

     height:80px;

 }

 .wrap .span2{

     width:80px;

     height:80px;

     display:block;

     line-height:80px;

     text-align:center;

     background:red;

     position:relative;

     top:-50%;

     left:-50%;

 }

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

 <div class="wrap">

        <span >fds</span>

 </div>

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     position:absolute;

     top:50%;left:50%;

     -webkit-transform: translate(-50%,-50%);

     -ms-transform: translate(-50%,-50%);

     -o-transform: translate(-50%,-50%);

     transform: translate(-50%,-50%);

 }

2.5并行一个标签

 <div class="wrap">

    <span></span>

    <em></em>

 </div>

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

     text-align: center;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     display:inline-block;

     vertical-align: middle;

 }

 .wrap em{

     height:100%;

     vertical-align:middle;

     display:inline-block;

 }

2.6display：table和display：table-cell

 <div class="wrap">

     <div>

         <span></span>

     </div>

 </div>

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

     display:table;

 }

 .wrap div{

     display:table-cell;

     vertical-align: middle;

     text-align: center;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     display:inline-block;

 }

2.7display:box

 <div class="wrap">

     <span >fds</span>

 </div>

 .wrap{

     width:200px;

     height:200px;

     position:absolute;

     top:50%;

     left:50%;

     margin-top:-101px;

     margin-left:-101px;

     border:1px solid red;

     display: -webkit-box;

     -webkit-box-pack:center;

     -webkit-box-align:center;

 }

 .wrap span{

     width:80px;

     height:80px;

     background:red;

     display:block;

 }

3.居中浮动元素

 <div class="wrap">

      <ul>

          <li>fdasfd</li>

          <li>fdsfds</li>

          <li>fdfds</li>

      </ul>

 </div>

 .wrap{

     width:800px;

     height:200px;

     margin:200px auto;

     border:1px solid red;

     position:relative;

     overflow: hidden;

 }

 .wrap ul{

     float: left;

     position: relative;

     left:50%;

     top:50%;

     border:1px solid red;

     height:100px;

 }

 .wrap li{

     float: left;

     width:100px;

     height:100px;

     background:red;

     position: relative;

     left:-50%;

     top:-50%;

     margin-left:10px;

     list-style: none;

     _display:inline; /*ie6双边距*/

     *overflow: hidden;/*ie7下面不支持宽度*/

 }

巴特西

关于html水平垂直居中的一些总结吧

html水平垂直居中

最新文章

热门文章