我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记。
孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:"居中一共有几种写法"呢,哈哈,先备着吧~~各种方法各有利弊,大家自己权衡吧,至少在需要居中时多个思路。
<center>
不建议用了。
text-align:center
在父容器里水平居中 inline 文字,或 inline 元素
vertical-align:middle
垂直居中 inline 文字,inline 元素,配合 DE>display:tableDE> ,DE>display:table-cellDE>,有奇效。
line-height
与 height 联手,垂直居中文字
margin:auto
<style> #ex2_container { width:200px; background-color:yellow; } #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; } </style> <div id="ex2_container"><div id="ex2_content">Hello World</div></div>
hacks, hacks(小技巧)
有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。
示例:
1 <style> 2 #ex3_container{ 3 width:200px; 4 height:200px; 5 background-color:yellow; 6 position:relative; 7 } 8 #ex3_content{ 9 left:50%; top:50%; 10 transform:translate(-50%,-50%); 11 -webkit-transform:translate(-50%,-50%); 12 background-color:gray; color:white; position:absolute; 13 } 14 </style> 15 <div id="ex3_container"><div id="ex3_content">Hello World</div></div>
这个技巧相当嚣张,同样适用于没固定大小的内容,DE>min-widthDE>,DE>max-heightDE>,DE>overflow:scrollDE>等。
绝对定位居中
父容器元素:DE>position: relativeDE>
.Absolute-Center {
50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
注意:高度必须定义,建议加 DE>overflow: autoDE>,防止内容溢出。
视口居中
内容元素:DE>position: fixedDE>,DE>z-index: 999DE>,记住父容器元素 DE>position: relativeDE>
1 .Absolute-Center.is-Fixed { 2 50%; 3 height: 50%; 4 overflow: auto; 5 margin: auto; 6 position: fixed; 7 top: 0; left: 0; bottom: 0; right: 0; 8 z-index: 999; 9 }
响应式
百分比宽高,最大、最小宽度均可以,加 padding 也可以
1 .Absolute-Center.is-Responsive { 2 60%; 3 height: 60%; 4 min- 400px; 5 max- 500px; 6 padding: 40px; 7 overflow: auto; 8 margin: auto; 9 position: absolute; 10 top: 0; left: 0; bottom: 0; right: 0; 11 }
偏移
只要 DE>margin: auto;DE> 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。
1 .Absolute-Center.is-Right { 2 50%; 3 height: 50%; 4 margin: auto; 5 overflow: auto; 6 position: absolute; 7 top: 0; left: auto; bottom: 0; right: 20px; 8 text-align: right; 9 }
溢出
居中内容比父容器高时,防止溢出,加 DE>overflow: autoDE> (没有任何 padding 时,也可以加 DE>max-height: 100%;DE>)。
1 .Absolute-Center.is-Overflow { 2 50%; 3 height: 300px; 4 max-height: 100%; 5 margin: auto; 6 overflow: auto; 7 position: absolute; 8 top: 0; left: 0; bottom: 0; right: 0; 9 }
调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 DE>overflow: autoDE> 。
1 .Absolute-Center.is-Resizable { 2 min- 20%; 3 max- 80%; 4 min-height: 20%; 5 max-height: 80%; 6 resize: both; 7 overflow: auto; 8 margin: auto; 9 position: absolute; 10 top: 0; left: 0; bottom: 0; right: 0; 11 }
图像
图像同样适用,设置 DE>height: auto;DE>
1 .Absolute-Center.is-Image { 2 50%; 3 height: auto; 4 margin: auto; 5 position: absolute; 6 top: 0; left: 0; bottom: 0; right: 0; 7 }
可变高度
高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 DE>display: tableDE> (需要考虑 Table-Cell 兼容性)。
1 .Absolute-Center.is-Variable { 2 display: table; 3 50%; 4 overflow: auto; 5 margin: auto; 6 position: absolute; 7 top: 0; left: 0; bottom: 0; right: 0; 8 }
负 margin
确切知道宽高,负 margin 是宽和高的一半。
1 .is-Negative { 2 300px; 3 height: 200px; 4 padding: 20px; 5 position: absolute; 6 top: 50%; left: 50%; 7 margin-left: -170px; /* (width + padding)/2 */ 8 margin-top: -120px; /* (height + padding)/2 */ 9 }
Table-Cell
参考文章:Flexible height vertical centering with CSS, beyond IE7
HTML结构:
1 <div class="Pos-Container is-Table"> 2 <div class="Table-Cell"> 3 <div class="Center-Block"> 4 <!-- CONTENT --> 5 </div> 6 </div> 7 </div>
CSS样式:
1 .Pos-Container.is-Table { display: table; } 2 .is-Table .Table-Cell { 3 display: table-cell; 4 vertical-align: middle; 5 } 6 .is-Table .Center-Block { 7 50%; 8 margin: 0 auto; 9 }
FlexBox
参考文章:Designing CSS Layouts With Flexbox Is As Easy As Pie
1 .Pos-Container.is-Flexbox { 2 display: -webkit-box; 3 display: -moz-box; 4 display: -ms-flexbox; 5 display: -webkit-flex; 6 display: flex; 7 -webkit-box-align: center; 8 -moz-box-align: center; 9 -ms-flex-align: center; 10 -webkit-align-items: center; 11 align-items: center; 12 -webkit-box-pack: center; 13 -moz-box-pack: center; 14 -ms-flex-pack: center; 15 -webkit-justify-content: center; 16 justify-content: center; 17 }