今天根据客户的修改意见,修改一组有带有缩略图片的标题的列表,图片在列表的最左边,图片的大小是固定的.要求是,标题字数如果过多的话,可以折成两行.但是要求垂直居中.最后解决了这个问题,但是没有做兼容性的测试.
下面就是我收集到的垂直的居中的几个方法,每个方法都拿出一个实例来演示
绝对居中
.relative-container{
position:relative
}
.absolute-container{
position:absolute;
margin:auto;
width:50%;
height:50%;
top: 0; left: 0; bottom: 0; right: 0;
}
一个栗子:垂直居中
优点:
- 兼容所有的浏览器
- 代码简单,没有太多的hack
缺点:
- 必须声明一个高度
- 在window phone上不起作用
负边框居中
.n-margin-container{
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
优点:
- 代码量少
- 兼容性好
缺点:
- 不支持自适应,不支持百分比和max-/min-属性
- 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。
变形
用transform属性来代替负边距
.transform-center{
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
优点:
- 相比负边距,能够自适应,支持百分比
- 代码少
缺点:
- IE8以下不支持
- 可能会影响其他的transform属性
- 某些情况下回出现文本或元素边界渲染模糊的现象
表格居中
算是终极大招吧
css:
.table-like{
display:table;
}
.table-cell-like {
display: table-cell;
vertical-align: middle;
}
.Center-Block {
width: 50%;
margin: 0 auto;
}
html:
<div class="table-like">
<div class="table-cell-like">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
优点：
- 高度可变
- 内容溢出会将父元素撑开。
- 跨浏览器兼容性好。
缺点：
- 需要额外html标记
行内块元素
一个同事看到他用到过这种居中方法
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* 消除inline-block元素之间的间距,具体可以查看后面的参考 */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
html:
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 200px;">
优点：
- 高度可变
- 内容溢出会将父元素撑开。
- 支持跨浏览器，也适应于IE7。
缺点：
- 需要一个容器
- 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
- 内容块宽度不能超过容器的100% - 0.25em。
flex
.flex-parent{
display:flex;
justify-content:center;
align-items: center;
background: #AAA;
height: 300px;
}
.flex-child{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
html:
<div class="flex-parent">
<div class="flex-child"></div>
</div>
优点：
- 内容块的宽高任意，优雅的溢出。
- 可用于更复杂高级的布局技术中。
缺点：
- IE8/IE9不支持。
- Body需要特定的容器和CSS样式。
- 运行于现代浏览器上的代码需要浏览器厂商前缀。
- 表现上可能会有一些问题
小结
- 绝对定位的方法比较万金油
-
display:table的方法兼容性最好 -
flex是未来的趋势 -
transform是实现不知道要固定的框的大小情况下的好办法,但是元素可能会模糊
