css居中
2017-01-04 15:03
218 查看
前言
临渊羡鱼,不如退而结网。夯实基础方能登堂入室习得上乘武功嘛~在日常开发过程中,经常遇到需要需要让元素居中展示,在此总结几种常用的写法,实际情况灵活使用,不对之处还望不吝赐教。(为了方便说明,请忽略文中的css命名规则与重复属性,实际项目中不可取)一.水平居中
1.水平居中单个元素
水平居中单个元素应该是最简单的,行内元素容器设置text-align: center, 块级元素自身设置magin:0 auto即可<div class="specified-width-ele text-align-center"> <span class="inline-ele"> 我是行内元素,我用text-align居中 </span> <div class="block-ele margin-0-auto"> 我是块级元素,我用magin居中 </div> </div>
.specified-width-ele { /* 外层定宽块级父元素 */ width: 800px; height: 100px; border: 1px solid #e3e3e3 } .inline-ele { /* 内部内联子元素 */ border: 1px solid #e3e3e3 } .block-ele { /* 内部块级子元素 */ width: 200px; border: 1px solid #e3e3e3 } .margin-0-auto { margin: 0 auto; }
2.水平居中多个元素之inline-block版
<div class="specified-width-ele text-align-center"> <div class="block-ele display-inline-block"> 块级元素1 </div> <div class="block-ele display-inline-block"> 块级元素2 </div> <div class="block-ele display-inline-block"> 块级元素3 </div> </div>
.display-inline-block { display: inline-block; }
父元素设置text-align:center,子元素display:inline-block,块之间的间隔可以用标签之间无空格去掉
[注意]若要兼容IE7-浏览器,可使用display:inline;zoom:1,来达到inline-block的效果
3.水平居中多个元素之flexbox版
<div class="specified-width-ele display-flex-13"> <div class="block-ele"> 块级元素1 </div> <div class="block-ele"> 块级元素2 </div> <div class="block-ele"> 块级元素3 </div> </div>
.display-flex-13 { display: flex; justify-content: center; }
【1】在伸缩容器上设置主轴对齐方式justify-content:center
【2】在伸缩项目上设置margin: 0 auto
[注意]IE9-浏览器不支持
此种方法将所有块级子元素全部居中,虽然display:inline-block的方式需要父子元素都加上css或者多余类,但是可以控制居中的子元素数量
二.垂直居中
1.垂直居中inline元素
(1) 垂直居中单行inline元素
<div class="specified-width-ele"> <span class="inline-ele line-height-2-1-1"> 我是单行内联元素,我用line-height垂直居中 </span> </div>
.line-height-2-1-1 { line-height: 100px; }
总是在网上看到一种流行的说法,单行垂直居中要将高度和行高设置成相同的值,但高度其实没必要设置。实际上,文本本身就在一行中居中显示。在不设置高度的情况下,行高可以撑开高度
(2) 垂直居中多行inline元素之table-cell版
<div class="specified-width-ele table-2-1-2"> <span class="inline-ele table-cell-2-1-2"> 我是单行内联元素1 </span> <span class="inline-ele table-cell-2-1-2"> 我是单行内联元素2 </span> <span class="inline-ele table-cell-2-1-2"> 我是单行内联元素2 </span> </div>
.table-2-1-2 { height: 100px; width: 800px; display: table; } .table-cell-2-1-2 { display: table-cell; vertical-align: middle; }
通过为table-cell元素设置vertical-align:middle,可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的。
[注意]设置为table-cell的div不能使用浮动或绝对定位,因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理,则需要外面再套一层div。
(3) 垂直居中多行inline元素之flexbox版
<div class="specified-width-ele display-flex-2-1-3"> <span class="inline-ele"> 我是单行内联元素1 </span> <span class="inline-ele"> 我是单行内联元素2 </span> <span class="inline-ele"> 我是单行内联元素3 </span> </div>
.display-flex-2-1-3 { display: flex; justify-content: center; flex-direction: column; }
2.垂直居中block元素
相比较于水平居中,垂直居中略显艰难,大部分原因是不能正确使用vertical-align。实际上,只要备足粮草,自然可以行军,接来下储备下关于垂直居中的几种思路,做到有备无患。(1) 绝对定位居中之calc版
<div class="specified-width-ele position-relative"> <div class="block-ele absolute-calc-vertical-align"> 我是块级元素,我用position:absolute和calc垂直居中 </div> </div>
.absolute-calc-vertical-align { height: 20px; /* 此处加的高度是为了计算top,同时体现了此方法的弊端 */ position: absolute; left: calc(50% - 100px); top: calc(50% - 10px); }
显然,这种方法最大的问题是,元素需要一个固定的尺寸,而需要垂直居中元素的尺寸常常是需要由它的内容来决定。如果我们有办法使用百分比来控制元素尺寸,我们的问题就解决了。不幸的是,对于大多数CSS属性(包括margin)百分比的值是相对于其父元素的宽度来决定
(2) 绝对定位居中之translate版
<div class="specified-width-ele position-relative"> <div class="block-ele absolute-translate-vertical-align"> 我是块级元素,我用position:absolute和translate垂直居中 </div> </div>
.absolute-translate-vertical-align { position: absolute; /* 此处没加高度,和文字自适应,是此方法的优点 */ left: 50%; top: 50%; transform: translate(-50%, -50%); }
translate函数的百分比是相对于自身高度的,所以top:50%配合translateY(-50%)可实现居中效果
和上面的方法对比, 弊端:(1)绝对定位通常不是一个很好的选择,因为它对整体的布局影响相当的大。(2)如果垂直居中元素的内容比视窗高度更高的话,它的顶部会被裁剪掉。
[注意]IE9-浏览器不支持
[注意]若子元素的高度已知,translate()函数也可替换为margin-top: 负的高度值
(3) flexbox居中
<div class="specified-width-ele display-flex"> <div class="block-ele margin-auto"> 我是块级元素,我用父元素flexbox和自身margin垂直居中 </div> </div>
.display-flex { display: flex; } .margin-auto { margin: auto; }
【1】在伸缩容器上设置侧轴对齐方式align-items: center
【2】在伸缩项目上设置margin: auto 0
flexbox: “这也称得上挑战吗?”
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 用户自定义多选框checkbox
- 后台管理页面布局(左侧导航长度根据右侧内容无限延伸)
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的