欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose

程序员文章站 2022-05-27 15:36:43
...

html水平垂直居中

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

1 
2 我在中间……3

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 
2 3 我在中间…… 我在中间…… 我在中间…… 我在中间……4 5 6

 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 
2 3 我在中间…… 我在中间…… 我在中间…… 我在中间……4 5

 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 
2 3

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 
2 3 fds4 5

 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 
2 fds3

 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 
2 3 4

 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 
2
3 4
5

 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 
2 fds3

 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 
2
    3
  • fdasfd
  • 4
  • fdsfds
  • 5
  • fdfds
  • 6
7

 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 }