博客
电影
宝箱
友链
关于
<
简述浏览器缓存之cookie
浏览器打开页面的过程中发生了什么
>
CSS常用的水平垂直居中方法
作者:
Cifer
类别: 技术·CSS
时间:2017-10-18 09:38:45
字数:2246
版权所有,未经允许,请勿转载,谢谢合作~
#### 前言 这是个老掉牙的问题了,[西法](http://www.boatsky.com "太空船博客" rel="nofollow")又刚好看到以前写的demo里有这个,干脆贴出来水一下。 demo汇总:<http://res.boatsky.com/demo/css/center.html> 为统一样式,写了两个公共class,分别是容器与内容,后面的demo不再重复贴这段代码: ```css .wrap { position: relative; width: 200px; height: 200px; border: 1px solid #bbb; margin-top: 5px; background-color: #ccc; } .content { width: 140px; height: 80px; background-color: yellow; } ``` #### 单行文字居中 最简单的居中,现在属性可实现,无兼容性问题,只有特殊场景可用 ```html <section class="wrap wrap1"> demo1 </section> ``` ```css .wrap1 { line-height: 200px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 后面两行是对超长内容溢出进行……省略处理 #### 负margin居中 这可能是最年长的居中方式了,无兼容性问题,要求已知内容的大小 ```html <section class="wrap"> <div class="content content2">demo2</div> </section> ``` ```css .content2 { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -70px; } ``` #### translate处理 比较常用的css3居中方式 ```html <section class="wrap"> <div class="content content3">demo3</div> </section> ``` ```css .content3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } ``` #### 添加伪元素居中 无兼容问题,需要添加伪元素 ```html <section class="wrap wrap4"> <div class="content content4">demo4</div> </section> ``` ```css .wrap4 { text-align: center; } .wrap4:before { content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle; } .content4 { display: inline-block; vertical-align: middle; text-align: left; } ``` #### auto居中 无兼容问题,可能没有上述居中方式使用这么多 ```html <section class="wrap wrap5"> <div class="content content5">demo5</div> </section> ``` ```css .content5 { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } ``` #### flex居中 新型方式,如果不考虑兼容,这是最好的方式,因为不再需要对容器与内容增加限制 ```html <section class="wrap wrap6"> <div class="content content6">demo6</div> </section> ``` ```css .wrap6 { display: flex; justify-content: center; align-items: center; } ``` #### table居中 不仅有兼容性问题,还需要额外加一层容器,用的比较少 ```html <section class="wrap wrap7"> <div class="table-cell"> <div class="content content7">demo7</div> </div> </section> ``` ```css .table-cell { display: table-cell; vertical-align: middle; } .content7 { margin: 0 auto; } ```
如果觉得有帮忙,您可以在本页底部留言。
相关推荐:
CSS不定高元素transition动画的解决方案
sass之scss心得
CSS变形matrix与动画cubic-bezier
……
更多
<
简述浏览器缓存之cookie
浏览器打开页面的过程中发生了什么
>
全部留言
我要留言
内容:
网名:
邮箱:
个人网站:
发表
全部留言