关灯
开启左侧

5种方式实现CSS元素水平居中,实用又简单!

[复制链接]
doubleyong 发表于 2018-11-26 11:28:46 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
1.常规方法 - 定宽元素
  1. html部分:
  2. <div class="container">
  3.     <div class="center"></div>
  4. </container>
  5. CSS部分:
  6. /*公用*/
  7. body,div{
  8.     margin: 0;
  9. }
  10. .container{
  11.     background: beige;
  12.     height: 1000px;
  13. }
  14. /*居中*/
  15. .center{
  16.     width:300px;
  17.     height:300px;
  18.     margin:auto;
  19.     background: aqua;
  20. }
复制代码
此方法缺点:内层元素必须设定(固定)宽度

2.不定宽元素 - 设置行内块

然而很多时候,我们并不知道需要居中元素的宽度,或者其宽度是随后台数据变化的。

下文开始,我们以“分页效果”为例,诠释“不固定宽度”的元素如何设置水平居中:
  1. html部分(外层div.container略):
  2. <div class="pages">
  3.         <li><</li>
  4.         <li>1</li>
  5.     <li>2</li>
  6.     <li>3</li>
  7.         <li>4</li>
  8.         <li>5</li>
  9.         <li>></li>
  10. </div>
  11. CSS部分(前文公用部分略):
  12. /*分页公用*/
  13. li{
  14.         list-style-type: none;
  15.         width: 25px;
  16.         height: 25px;
  17.         text-align: center;
  18.         line-height: 25px;
  19.         background: black;
  20.         color: #fff;
  21.         border-radius: 3px;
  22.         cursor: pointer;
  23. }
  24. li:hover{
  25.         background: darkorange;
  26. }
  27. /*设置行内块*/
  28. .pages{
  29.         margin-top: 20px;
  30.         text-align: center;
  31. }
  32. .pages li{
  33.         display: inline-block;
  34. }
复制代码
此方法缺点:需要解决inline-block带来的默认间距(浏览器自动设置)

3.不定宽元素 - 设置浮动

用浮动的办法,即可避开浏览器带来的inline-block默认间距
思路:
1.外层相对定位,内层相对定位
2.外层左浮动,内层左浮动
3.外层右移50%,内层左移50%
  1. html部分不变,为避免重复class改为pages2,后文同理
  2. CSS部分:
  3. .pages2{
  4.         position: relative;
  5.         float: left;        //外层左浮 -> 内层宽度刚好撑开外层容器
  6.         left: 50%;  //外层右移50%
  7. }
  8. .pages2 li{
  9.         float: left;
  10.         position: relative;
  11.         right: 50%; //内层左移50%
  12. }
  13. .pages2 li:not(:first-child){
  14.         margin-left:5px;
  15. }
复制代码
注:外层元素一旦设置float属性,内层将自动刚好撑开外层宽度,等同于为外层设置display: inline-block;

4.不定宽元素 - 绝对定位
思路:
1.外层绝对定位,内层相对定位,外层的外层相对定位
2.外层左浮动,内层左浮动
3.外层右移50%,内层左移50%
  1. CSS部分:
  2. .container{
  3.         position: relative;     //外层的外层相对定位
  4. }
  5. .pages3{
  6.         position: absolute; //外层绝对定位
  7.         float: left;
  8.         left: 50%;
  9. }
  10. .pages3 li{
  11.         float: left;
  12.         position: relative;     //内层相对定位
  13.         right: 50%;
  14. }
  15. .pages3 li:not(:first-child){
  16.         margin-left:5px;
  17. }
复制代码
5.CSS新特性 - fit-content
CSS3新特性width: fit-content,只需配合margin: auto,即可巧妙将元素水平居中
(fit-content目前仅支持谷歌和火狐浏览器,但非常适合移动端开发!)
  1. .pages4{
  2.         width: fit-content;
  3.         width:-moz-fit-content;
  4.         margin:auto;
  5. }
  6. .pages4 li{
  7.         float: left;
  8. }
  9. .pages4 li:not(:first-child){
  10.         margin-left:5px;
  11. }
复制代码
转自:http://bugshouji.com/shareweb/t627
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )