CSS居中布局
来源:互联网 发布:学英标的软件 编辑:程序博客网 时间:2024/05/16 15:56
一、水平居中
父元素和子元素的宽高均不定的情况下进行水平居中。
1、水平居中一——inline-block+text-align
text-align
设置在父元素上,对具有inline属性的子元素是起作用的,子元素会继承text-align
属性,所以如果想要子元素中的内容不受影响,要在子元素上重新设置text-align
属性。
IE8及以上才支持inline-block
,IE6、7只支持部分inline-block
属性,IE6、7支持inline
元素转换成inline-block
,但不支持block
元素转换成inline-block
,所以非inline
元素在IE6,7下要转换成inline-block
,需先转换成inline
,然后触发hasLayout
,以此来获得和inline-block
类似的效果。
全兼容的inline-block
:
div { display: inline-block; *display: inline; *zoom: 1;}
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.child{ display:inline-block;}.parent{ text-align:center;}
2、水平居中二——table+margin
display
为table
的元素其实和display
为block
元素很像,但是它的宽度是由内容来决定的。
IE8及以上才支持table
属性,兼容解决方案:把html结构换成table结构。
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.child{ display:table; margin:0 auto;}
3、水平居中三——absolute+transform
absolute
元素默认宽度为内容宽度,脱离文档流(fixed
元素也是)。
translate
中的百分比指的是自身的宽度。
优点:
absolute
元素是脱离文档流的,不会对其它元素造成影响- 只需要设置
child
的属性即可
IE9及以上才支持transform
属性。
兼容方案:把transform
改成margin-left
为自身宽度的一半。
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ position:relative;}.child{ position:absolute; left:50%; transform:translateX(-50%);}
4、水平居中四——flex+justify-content
优点:只需要设置parent
的属性即可。只有在文档流中的子元素才是flex-item
,比如block
、float
、inline
,absolute
则不是。
缺点:IE10及以上才支持flex
属性
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ display:flex; justify-content:center;}
或者
.parent{ display:flex;}.child{ margin:0 auto}
补充:
行内元素水平居中可以直接用:text-align:center
块级元素水平居中可以直接用:margin-left:auto;margin-right:auto
;
二、垂直居中
父元素和子元素的宽高均不定的情况下进行垂直居中。
1、垂直居中一——table-cell+vertical-align
vertical-align
可以作用在inline
、inline-block
、table-cell
等元素上。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
优点:兼容性好,table-cell
支持IE8及以上。如果想要兼容IE6、7,要将html结构换成表结构。
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS.parent{ display:table-cell; vertical-align:middle;}
2、垂直居中二——absolute+transform
absolute
元素默认也是没有宽度的,它的宽度是由内容来决定的。
translate
中的百分比指的是自身的宽度。
优点:
absolute
元素是脱离文档流的,不会对其它元素造成影响- 只需要设置child的属性即可
缺点:IE9以上才支持transform
兼容方案:把transform
改成margin-left
为自身对的一半
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ position:relative;}.child{ position:absolute; top:50%; transform:translateY(-50%);}
3、垂直居中三——flex+align-items
优点:只需要设置parent
的属性即可
缺点:IE10及以上才支持flex
属性
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ display:flex; align-items:center;}
补充:
行内元素且只有一行垂直居中:将line-height
设置成与父元素高度一样
三、水平垂直居中
父元素和子元素的宽高均不定的情况下进行水平垂直居中。
综合水平居中和垂直居中的方案来进行水平垂直居中。
1、水平垂直居中一——inline-block+text-align+table-cell+vertical-align
兼容性好:
table-cell
支持IE8及以上。如果想要兼容IE6、7,要将html
结构换成表结构。- IE8及以上才支持
inline-block
,IE6、7只支持部分inline-block
属性
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS.parent{ text-align:center; display:table-cell; vertical-align:middle;}.child{ display:inline-block;}
2、水平垂直居中二——absolute+transform
兼容问题:IE9及以上才支持transform
属性。
兼容方案:把transform
改成margin-left
为自身对的一半。
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ position:relative;}.child{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
3、水平垂直居中二——flex+justify-content+align-items
优点:只需要设置parent
就可以
缺点:兼容性不好,只有IE10及以上才支持flex
属性
HTML
<div class="parent"> <div class="child">DEMO</div></div>
CSS
.parent{ display:flex; justify-content:center; align-items:center;}
- Div+CSS布局居中
- css布局 居中总结
- css布局 居中总结
- div+css 居中布局
- CSS居中布局
- CSS布局居中问题
- css布局之居中
- CSS居中布局
- css居中和布局
- CSS布局:水平居中
- css布局,居中总结
- css之居中布局
- css 居中布局
- CSS布局---居中方法
- CSS居中及布局
- css布局------各种居中
- CSS居中布局
- css Div+CSS布局居中
- Spring中的Quartz配置
- vs2010MFC调用百度地图
- 前端复习--还是数组的研究
- bat脚本设置临时系统环境变量
- 记录一次代码与芯片不匹配的错误
- CSS居中布局
- JDK1.5新特性--自动装箱与拆箱
- 简单的方法使用zabbix监控rabbitmq消息队列堵塞
- Java循环判断数组中是否包含字符串
- 用java实现对文件的读取
- <Android 基础(二十六)> 渐变色圆角Button
- ViewDragHelper实战 自己打造Drawerlayout
- JavaScript对象字面量
- PHP - 时间过去多少小时/分钟/秒