垂直居中是布局中十分常见的效果之一,为实现良好的兼容性:
1.PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。
2.利用CSS3的Transform:translate;
pc端CSS3垂直居中对齐
方法1:table-cell
html结构:
1
2
3
|
<div class = "box box1" >
<span>垂直居中</span>
</div>
|
css:
1
2
3
4
5
|
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
|
方法2:display:flex
1
2
3
4
5
|
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
|
方法3:绝对定位和负边距
.box3{position:relative;}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方法4:绝对定位和0
1
2
3
4
5
6
7
8
9
|
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
|
这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。
方法5:translate
1
2
3
4
5
6
7
8
|
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
|
这实际上是方法3的变形,移位是通过translate来实现的。
方法6:display:inline-block
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content: '' ;
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
|
这种方法确实巧妙...通过:after来占位。
方法7:display:flex和margin:auto
1
2
3
4
5
|
.box8{
display: flex;
text-align: center;
}
.box8 span{margin: auto;}
|
方法8:display:-webkit-box
.box9{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
}
css3博大精深,可以实现很多创造性的效果,需要好好研究下。
今天又发现一种方法,现在补上:
方法9:display:-webkit-box
这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮动,并显示在中间。
<div class="floater"></div>
<div class="content"> Content here </div>
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现
缺点:
唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
移动端CSS3垂直居中对齐
在移动前端制作中,很多新的css3特性能够帮助我们更好的制作。例如这个垂直水平居中问题,就有一个简单的代码可以解决:
利用CSS3的Transform:translate
.center{
width:50%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
好处:
同时注意:
- 需要写厂商前缀
- 需要定义宽度
- 会和其他transform样式有冲突
- 某些情况下的边缘和字体渲染会有问题
兼容性:
http://caniuse.com/#search=transform 在这里看到2d的兼容性还是很全面,Android2.x,ios3.x都兼容,推荐用
利用Flexbox
.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
好处:
- 内容可以是任意高宽,溢出也能表现良好
- 可以用于各种高级布局技巧
注意:
- 需要在body上写样式,或者需要额外容器
- 需要各种厂商前缀兼容现代浏览器
- 可能有潜在的性能问题
兼容性:
移动设备基本兼容,可以放心使用,不过很容易掉坑,慎用。
利用容器:
父容器css属性 :display:table; overflow:hidden;
子容器css属性 :vertical-align:middle; display:table-cell
拓展:
完美解决移动Web小于12px文字居中的问题
前几天的一篇博文:
移动Web单行文字垂直居中的问题,提到了移动web里小于12px的文字居中异常的问题,最后还是改为12px才近乎解决了问题。但是有时候或许并不是那么乐观,你并不能将原本定为10px的字体改为12px。那该怎么办呢。
我们都知道,移动端为了高清屏显示1px的border,会有那么几种方法,通常最好的方法是transform scale,并且支持圆角。既然一个border能缩放,那么整个文字区域自然也能缩放。
比如上篇博文里的示例,CSS是这样的:
.label {
height: 20px;
line-height: 20px;
font-size: 10px;
border: 1px solid #000;
}
既然要缩放,就把1px border也一起做的,省的再添加一个伪类,我们将各个尺寸乘以2,然后缩放为原来的一半:
.label {
height: 40px;
line-height: 40px;
font-size: 20px;
border: 1px solid #000;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
但,或许是line-height在移动端确实不怎么样,居中效果并不好,改为padding才好了些。
再尝试一种方案,给元素外层再包一层父元素,用display:table来实现。
<div class="label-parent">
<p class="label">你是谁</p>
</div>
.label-parent {
display:table;
height: 40px;
line-height: 40px;
font-size: 20px;
border: 1px solid #000;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.label {
display: table-cell;
vertical-align:middle;
}
这样应该是比较健全的的方案,多写一层,抛弃掉padding和line-height,最后实现的效果也不错。有童鞋可能会担心会糊,确实chrome模拟器是会糊的,但手机屏幕大都是高清屏幕,几乎不会出现模糊的情况。
在IOS和Android4.x上工作正常,但Android2.3 并不会缩放,搜索一通有说是scale和translate一起不管用的,有说viewport设置的,不过都没用,所以可以给Android2.x单独设置未缩放的样式,只要排版不乱就好。
.label-2x {
height: 20px;
line-height: 20px;
font-size: 10px;
border: 1px solid #000;
}
那如何知道系统是2x呢,在Special CSS3 Scaling for andriod version less than 2.3发现了一段好用的脚本:
var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 ) {
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if (androidversion <= 2.3) {
// alert('andriod < 2.3');
// your code here
}
}
你可以动态的加一段css到style里,如果只有一个标签你也可以直接操作dom改变样式。
注:略有改动,敬请谅解!
原文地址:http://www.cnblogs.com/hutuzhu/p/4450850.html