css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
css实现水平垂直居中的方式有哪些
css让容器水平垂直居中的7种方式这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。
这种方法比较多,本文只总结其中的几种,以便加深印象。
效果图都为这个:
方法一:position加margin
- <li class="wrap">
- <li class="center"></li>
- </li>
- /**css**/ .wrap { width: 200px; height: 200px; background: yellow; position: relative;
- } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; rightright: 0; top: 0; bottombottom: 0;
- }
兼容性:主流浏览器均支持,IE6不支持
方法二:diaplay:table-cell
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /*css*/ .wrap{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center;
- } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green;
- }
兼容性:由于display:table-cell的原因,IE67不兼容
方法三:position加 transform
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px;
- }
兼容性:ie9以下不支持 transform,手机端表现的比较好。
方法四:flex;align-items: center;justify-content: center
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
- } .center { background: green; width: 100px; height: 100px;
- }
移动端首选
方法五:display:flex;margin:auto
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;
- } .center { background: green; width: 100px; height: 100px; margin: auto;
- }
移动端首选
方法六:纯position
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;
- } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;
- } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;
- }
兼容性:适用于所有浏览器
方法六中的方法一计算公式如下:
子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
方法二计算公式:
left值固定为50%;
子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
top值也一样,固定为50%
子元素的margin-top= -(子元素的高/2)=-100/2= -50px;
方法七:兼容低版本浏览器,不固定宽高
- <!-- html -->
- <li class="table">
- <li class="tableCell">
- <li class="content">不固定宽高,自适应</li>
- </li>
- </li>
- /*css*/ .table { height: 200px;/*高度值不能少*/ width: 200px;/*宽度值不能少*/ display: table; position: relative; float:left; background: yellow;
- } .tableCell { display: table-cell; vertical-align: middle; text-align: center;
- *position: absolute; padding: 10px;
- *top: 50%;
- *left: 50%;
- } .content {
- *position:relative;
- *top: -50%;
- *left: -50%; background: green;
- }
暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。
总结
如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠
也就是用 flex; align-items: center; justify-content: center;
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
- } .center { background: green; width: 100px; height: 100px;
- }
或者display:flex;margin:auto;
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;
- } .center { background: green; width: 100px; height: 100px; margin: auto;
- }
如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。
- <!-- html -->
- <li class="wrap">
- <li class="center"></li>
- </li>
- /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;
- } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;
- } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;
- }
如果PC端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了。
这种css元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。- css怎么样让banner不动(CSS banner图响应式居中显示的方法)
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
- css文字图片垂直居中对齐(CSS设置文字图片垂直居中的方法总结)
- div内容水平垂直居中的方法(不定宽高的文字在div中垂直居中实现方法)
- 让文字居中代码是多少(如何使定义了高度和宽度的< a >里的文字垂直居中实现代码)
- css如何让浮动元素水平居中
- css垂直居中
- cssdiv垂直居中怎么设置(CSS设置DIV垂直居中的N种方法 兼容IE浏览器)
- JS让打开的窗口居中
- html怎么使用css居中(HTML+CSS实现单列布局水平居中布局)
- css图片设置垂直居中(CSS居中实例之大小不固定的图片居中方法)
- 前端单行文本垂直居中(移动端的text-overflow多行文本溢出显示省略号…)
- css垂直左右居中的方式(css常用元素水平垂直居中方案)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
热门推荐
- oracle for update nowait和for update区别
- python爬虫request方法介绍(详解Python3网络爬虫二:利用urllib.urlopen向有道翻译发送数据获得翻译结果)
- 由于Web服务器上的“ISAPI 和CGI 限制”的解决方法
- mysql缓存是什么(详解mysql查询缓存简单使用)
- sql注入防范有哪些方法(如何有效防止sql注入的方法)
- mysql url连接参数配置(浅谈Mysql连接数据库时host和user的匹配规则)
- js移动端菜上下滑动效果(JS实现移动端上下滑动一次一屏)
- 虚拟主机值不值得买(购买虚拟主机10个注意事项)
- dede数据库详解(Dede 删除文档同时文章中的图片的方法)
- canvas处理图片风格(html2 canvas生成清晰的图片实现打印功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9