CSS 实现居中的几种方法
**CSS 实现居中的几种方法**
- 一、前言
- 二、常见的方法
- 方法一：margin和width实现
- 方法二：inline-block和父元素text-align
- 方法三：浮动实现水平居中
- 方法四：绝对定位实现
- 方法五：css3的flex实现
- 方法六：css3的fit-content
一、前言
居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太麻烦了。
二、常见的方法
<div class="pagination"><ul><li><a href="#">Prev</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">Next</a></li></ul></div>.pagination li{line-height: 25px;list-style: none;display: inline;float: left;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}展示：
方法一：margin和width实现
这个是最常见的方案：在容器上定义一个固定的宽度，然后配合margin（外边距）左右的值为auto。
.pagination{width: 340px;margin: 0 auto;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}效果实现了，扩展性不强，因为宽度无法确定，也就无法确定容器宽度。
优点：实现简单，浏览器兼容性强
缺点：扩展性差，无法自适应未知情况
方法二：inline-block和父元素text-align
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：
body{background: #000;text-align: center;
}
.pagination{margin-top: 50px;display: inline-block;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}这个方法也是比较简单易懂，inline-block解决了水平居中的问题，但是又有一个新的问题–空白间距，所以需要解决inline-block带来的间距。
优点：简单易懂，扩展性强
缺点：需要额外处理inline-block的浏览器兼容性问题
方法三：浮动实现水平居中
感到很意外，元素都浮动了，他还能水平居中？大家都知道，浮动要么靠左、要么靠右，还真少见有居中的。其实略加处理就有了。
body{background: #000;
}
.pagination{margin-top: 50px;float: left;width: 100%;
}
.pagination ul{position: relative;float: left;left: 50%;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;position: relative;right: 50%;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}这样一来就实现了float浮动居中的效果。先整体右移50%，在左移盒子宽度得50%
优点：兼容性强，扩展性强。
缺点：实现原理比较复杂
方法四：绝对定位实现
绝对定位实现水平居中，我想大家也非常的熟悉了，并且用得一定不少。
.ele {position: absolute;width: 宽度值;left: 50%;margin-left: -(宽度值/2);
}但这种实现我们有一个难题，我并不知道元素的宽度是多少，这样也就存在如方法一所说的难题，但我们可以借助方法三做一点变通：
body{background: #000;margin-top: 50px;
}
.pagination ul{position: absolute;left: 50%;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;position: relative;right: 50%;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}优点：扩展性强，兼容性强;
缺点：理解性难。
方法五：css3的flex实现
能让我们的布局变得更加灵活与方便，唯一的就是目前浏览器的兼容性较差。那么第五种方法，我们就使用flex来实现。
body{background: #000;margin-top: 50px;
}
.pagination{display: flex;justify-content: center;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}优点：实现简单，扩展性强
缺点：兼容性差
方法六：css3的fit-content
“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果：
body{background: #000;margin-top: 50px;
}
.pagination{width: fit-content;margin: 0 auto;
}
.pagination li{line-height: 25px;list-style: none;display: inline;float: left;
}
.pagination a{text-decoration: none;display: block;color: #000;padding: 0 10px;border-radius: 2px;border: 1px solid #F2F2F2;background: #333;
}
.pagination a:hover{background: orange;
}优点：简单易懂，扩展性强
缺点：浏览器兼容性差
原文链接
CSS 实现居中的几种方法相关推荐
- css居中的几种办法,CSS div居中的几种方法
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框. 方法一:对div使用绝对布局position:absolute;并设置to ...
- CSS元素居中的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com 经常碰到有人在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参 ...
- CSS上下左右居中的几种方法
1.absolute,margin: auto .container {position: relative; } .content {position: absolute;margin: auto; ...
- css上下左右居中得几种方法
1.绝对定位居中 .box1{position:relative;border:1px solid #000000; /* 自定义高度*/ width:500px; height:500px; } . ...
- absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...
- css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
- html绝对定位怎么页面居中,css绝对定位如何居中？css绝对定位居中的四种实现方法...
在网页进行css布局时居中是经常需要用到的,其中就有css绝对定位居中,那么,css绝对定位如何实现居中?今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法. css绝对定位居中的实现方法有 ...
- html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
- web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法 在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
最新文章
- 使用Python和OpenCV捕获鼠标事件，并裁剪图像
- 《C和指针》对于数组这一节的总结
- 工业用微型计算机(21)-指令系统(17)
- 壳体有矩理论与实用计算机方法,《薄壳计算和理论》.pdf
- 在邮件标头中找到无效的字符_在实践中重试HTTP标头
- 2020年，中国AI创业公司将走向何方
- 信息学奥赛一本通 1970：【15NOIP普及组】扫雷游戏 | OpenJudge NOI 1.8 14:扫雷游戏地雷数计算 | 洛谷 P2670 [NOIP2015 普及组] 扫雷游戏
- 寄存器地址和内存地址_通俗易懂和你聊聊寄存器那些事(精美图文)
- 预装鸿蒙系统！华为MatePad Pro 2或暂定6月2日发布
- FF“流产”后 许家印开始了自己的造车之路
- 沃尔沃汽车：通过基于模型的开发工具实现汽车软件模型结构度量
- date和datetime长度设置多少_太原市玻璃温室大棚多少钱
- jdbc map获取keys_小前端读源码 - React（浅析Keys原理）
- 报童问题模型matlab,报童模型matlab
- 计量笔记(二) | OLS估计量性质
- 【python】43_用pygame制作乌龟吃鱼游戏
- 土木保研可以跨计算机专业吗,本科土木跨考计算机专业研究生可行吗？本科土木跨考计算机专业研...
- 剑指offe 替换空格
- 专注B2B跨境支付的背后，XTransfer的风控基础设施是如何炼成的？
- HTTP协议Response