css居中总结
来源:互联网 发布:云豹直播源码破解版 编辑:程序博客网 时间:2024/05/22 03:13
css居中总结
在页面的设计中,经常会需要将某个元素或者模块居中,下面就总结一下这种常见的布局方式。(由于都是居中,就不放图了)
1. 水平居中
1. 使用text-align:center和display:inline-block实现
.parent { text-align:center;}.child { display:inline-block;}
方便理解的话,可以分为两个步骤,首先使用display:inline-block将元素设置为可被text-align控制的内联块级元素,然后使用text-align属性控制这个元素进行居中。
- 优点:兼容性好
- 缺点:需要同时设置子元素和父元素
需要注意的是:在使用inline-block时,会产生一个缝隙,对布局会造成一些微小的影响,从而影响到页面的美观,这是解决方法
2. 使用margin:0 auto实现
.child{ width:100px; margin:0 auto;}
很简单的居中方式,不多做解释。
- 优点:兼容性好,简单
- 缺点:只能用于固定宽度的元素。(固定宽度有些欠妥,因为宽度为%的元素也可以使用这个方法居中,但是没有想到什么更好的词)
3. 使用display:table实现
child { display:table; margin: 0 auto;}
display:table 这个属性,我没有用过,只知道可以通过这个属性来进行布局。虽然w3c中介绍说display:table可以使得元素就像<table>
元素一样,定义一个块级盒子,但是还是有区别的,首先在语义上就是不一样而定,而且产生的实际效果也是不一样的。
- 优点:只需要对自身设置
- 缺点:兼容性不好,IE6,7需要调整
4. 使用绝对定位实现:
.child { position:absolute; witdh:20%; left:50%; margin-left:-10%;}
使用margin的负值来进行居中,原理是先把元素向右移动父元素的50%,然后使用margin的负值向左移动回来该元素宽度的一半。
- 优点:兼容性好,并且不会对其他元素造成影响,会脱离文档流
- 缺点:需要父元素不是static元素(即元素的position属性值不是static),并且需要知道元素的宽度。(如果知道元素宽度了直接用margin:0 auto了,谁还会用这个。。)
其实还有一种使用css3的实现方法:
.child { position:absolute; left:50%; transform:translate(-50%);}
transform属性是用来旋转元素的,但是通过translate()进行的是2D的转换,translate()有两个参数,一个是控制x轴的相对移动,第二个是控制y轴的相对移动,所以当传入-50%的时候,就会向左移动该元素的一半,达到和margin的负值一样的效果,并且不需要知道元素的宽度。
- 优点:不需要知道元素的宽度
- 缺点:需要父元素为非static元素,并且兼容性不太好
除了这些以外,还有一些使用css3标准的实现方法,比如说:
使用flex布局实现
.parent { display:flex; justify-content:center;}
Or
.parent { display:flex;}.child { margin:0 auto;}
这些布局方法不太了解,在此不详细介绍了。但是由于是css3新添加的,所以可想而知,兼容性不会太好。
2. 垂直居中
1. 使用table-cell实现
.parent { display:table-cell; vertical-align:middle;}
上述布局会造成子元素相对于父元素垂直居中。
优点:子元素和父元素都不需要知道高度
缺点:低版本IE不兼容,当文本较多时,会造成文本的溢出,并且不可以通过overflow:hidden隐藏
因此适用于较少的文字或者文字数量固定的情况
2. 使用绝对布局实现:
.parent { position:relative;}.child { position:absolute; top:50%; height:100px; margin-top:-50px;}
和使用绝对布局的水平居中的原理相同,都是使用margin的负值。
- 优点:兼容性好
- 缺点:需要父元素是非static的,并且需要知道子元素的高度
类比水平居中,也有一个使用css3中的transform进行居中的方法:
.parent { position:relative;}.child { position:aboslute; top:50%;/*百分比参照物是父元素*/ transform:translate(0,-50%);/*百分比参照物是自身*/}
- 优点:不需要知道子元素的高度
- 缺点:兼容性不是很好,需要父元素是非static元素
3. 使用flex实现
.parent { display:flex;}.child { margin: auto 0;}
Or
.parent { display:flex; aligin-items:center;}
- 优点:简单
- 缺点:兼容性差
还有一些在子元素前或者后添加元素的方法,感觉这种方法会对界面造成影响,并且违反了语义化规则,想了解的同学可以去看这个
3. 水平垂直居中
基本上就是前面两种的结合
1. 11结合,使用table-cell和inline-block实现
.parent { display:table-cell;/*用于垂直居中*/ vertical-align:middle; text-algin-center;/*用于水平居中*/}.child { display:inline-block;/*用于水平居中*/}
2. 21结合,使用margin:0 auto和table-cell实现
.parent { display:table-cell; vertical-align:middle;}.child { margin0 auto;}
3. 31结合,使用table-cell和table实现(感觉怪怪的)
总感觉怪怪的,父元素是table-cell而子元素是table,不过经过测试确实可以用。。
.parent { display:table-cell; vertical-align:middle;}.child { display:table; margin:0 auto;}
4. 使用绝对布局来实现
.parent { position:relative;}.child { height:200px; width;200px; position:aboslute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;}
或者使用transform:translate();和使用margin的负值原理相同。
5. 使用flex实现
.parent { display:flex; justify-content:center; align-items:center;}
看起来很简洁,不过兼容性不太好
总结:
总结下来的话,实现居中基本上就那几种方法,使用转化为inline-block然后使用text-align;或者display:table或table-cell,然后居中;或者使用绝对布局然后使用margin的负值居中;或者使用css3用flex来布局。以上就是我总结的居中方法,可能不太完善或者有些问题,欢迎指点。
参考资料:利用HTML和CSS实现常见的布局
- css布局 居中总结
- css布局 居中总结
- css 居中总结
- CSS居中总结
- html css 居中总结
- CSS垂直居中总结
- css布局,居中总结
- css居中总结
- css居中总结
- CSS居中学习总结
- css居中总结
- CSS居中总结
- CSS居中方式总结
- CSS垂直/水平居中总结
- css中各种居中总结
- CSS 垂直居中问题总结
- CSS学习总结---垂直居中
- CSS-水平/垂直居中总结
- #102. 最小费用流
- 位图的实现以及位图的应用
- C语言库函数探究
- 看我是怎么学SLAM(二)——3D自主探索建图源码解读
- Spring-AOP 通过配置文件实现 环绕增强
- css居中总结
- android总体流程
- 文本自动摘要—tensorflow_textsum
- java-栈的实现
- Softmax
- 自定义控件之绘图篇:canvas变换与操作
- 基于树莓派利用红外二极管遥控空调,并加入homeassistant
- Django连接mysql 出现No module named ‘MySQLdb’.问题
- Spring-AOP 通过配置文件实现 异常抛出增强