页面布局(一)

一.水平居中

• Prev


• 1


• 2


• 3


• 4


• 5


• Next

1、margin和width实现水平居中

 .pagination{
 width:200px;
 margin:0px auto;
 }
 

优点：实现简单,易懂，浏览器兼容性强；
缺点：无法确定元素容器的宽度;

2、inline-block实现水平居中方法

 .pagination{
 text-align: center;
 }
 .pagination li {
 display: inline-block;
 }
 

做点：实现简单,易懂，扩展性强；
缺点：需要额外处理inline-block的浏览器兼容性（inline-block项与inline-block项由回车符带来的空白间距，而且这个间距并不是所有浏览器都有）；

3、浮动和相对定位实现水平居中的方法

 .pagination {
 float: left;
 width: 100%;
 overflow: hidden;
 position: relative;
 }
 .pagination ul {
 position: relative;
 float: left;
 left: 50%;
 text-align: center;
 }
 .pagination li {
 float: left;
 position: relative;
 right: 50%;
 }
 

如：.pagination设置了浮动之后，他的内容有多宽就会撑开有多大的容器

floatnone.png

floatleft.png

allfloat.png

left50.png

right50.png

优点：兼容性强，扩展性强；
缺点：实现原理较复杂；

4、绝对定位和相对定位实现水平居中

 .ele {
 position: absolute;
 width: 宽度值;
 left: 50%;
 margin-left: -(宽度值/2);
 }
 
 
但这种实现我们有一个难题，我并不知道元素的宽度是多少，所以我们借助方法三做一点变通：
 .pagination {
 position: relative;
 }
 .pagination ul {
 position: absolute;
 left: 50%;
 }
 /注意，这里不能是absolute，大家懂的/
 .pagination li {
 float: left;
 position: relative;
 right: 50%;
 }
 

优点：扩展性强，兼容性强;
缺点：理解性难;

5、绝对定位和tanslateX实现居中布局。
适用于块级元素不给出宽高的情况下(需要借助transtrom的tanslateX方法)。

 .pagination {
 position: relative;
 }
 .pagination ul{
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 }
 

6、CSS3的flex实现水平居中方法

 .pagination {
 display: -webkit-box;
 -webkit-box-orient: horizontal;
 -webkit-box-pack: center;
 display: -moz-box;
 -moz-box-orient: horizontal;
 -moz-box-pack: center;
 display: -o-box;
 -o-box-orient: horizontal;
 -o-box-pack: center;
 display: -ms-box;
 -ms-box-orient: horizontal;
 -ms-box-pack: center;
 display: box;
 box-orient: horizontal;
 box-pack: center;
 }
 

优点：实现便捷，扩展性强;
缺点：兼容性差(现在大部分现代浏览器都支持了);

 
 
parent{
 
 
display: flex;
justify-content: center;
 
 
}
 

dispaly:box / flexbox / flex区别

flexbox是css灵活盒布局模块，在发展的过程中标准也不断变化：

1.display:box,box-{}是2009的flexbox版本
2.display:flexbox,或者函数flex()，是2011年比较奇怪的杂糅
3.display:flex,flex-{},是目前正在使用的2012年发布的标准

潮流当然是要跟着最新的标准走，但是前端的问题当然要根据支持浏览器的支持情况来决定，如果低版本的浏览器支只支持旧的标准，而我们又需要支持这部分浏览器的话，你也必须写上，但是它们的用法还是很相似的，所以如果为了兼容，同时写上也是无可厚非的。

7、CSS3的fit-content实现水平居中方法

 “fit-content”是CSS中给“width”属性新加的一个属性值,得配合margin让我们实现水平居中的效果
 .pagination ul {
 width: -moz-fit-content;
 width:-webkit-fit-content;
 width: fit-content;
 margin-left: auto;
 margin-right: auto;
 }
 

优点：简单易懂，扩展性强;
缺点：浏览器兼容性差;

去w3c学css