关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose
程序员文章站
2022-05-27 15:36:43
...
html水平垂直居中
最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便,0.0~~
1.居中文本
12 我在中间……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在父级居中)
12 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 }
方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)
12 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.居中元素
12 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负值
12 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相对于自己偏移,不考虑兼容性的情况下,这个方法很好)
12 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并行一个标签
12 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
123 45
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
12 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.居中浮动元素
123
7- fdasfd
4- fdsfds
5- fdfds
6
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 }
推荐阅读
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
html中的水平居中和垂直居中的问题。(固定高度与高度不定)_html/css_WEB-ITnose
-
css实现的弹出窗口始终垂直水平居中效果_html/css_WEB-ITnose
-
CSS设置行内元素和块级元素的水平居中、垂直居中_html/css_WEB-ITnose
-
CSS实现水平垂直同时居中的5种思路_html/css_WEB-ITnose
-
【居中系列】大小不固定的图片在固定容器中的水平垂直居中_html/css_WEB-ITnose
-
关于多行文字水平垂直居中的一点研究_html/css_WEB-ITnose
-
关于CSS的一些总结_html/css_WEB-ITnose
-
CSS DIV界面垂直与水平居中的写法_html/css_WEB-ITnose
-
关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose