垂直居中
单行文本垂直居中
父元素高度为auto
一个父元素如果不设置高度的话,默认就是紧包裹着子元素,如果父元素设置的pading-top
和padding-bottom
相同,这本身就是一个垂直居中效果,但是当子元素并不是独占一行,而是inline元素和inline-block元素组合成一行,比如下面这个例子:
inline元素和inline-block元素在同一行显示,由于图片这个inline-block元素本身有高度,就会把整个行撑开,但是文字和图片依然在一行,细看可以发现,图片本身并没有和文字最下边对齐,这是由于inline-block默认带有vertical-align
属性,其值默认为baseline,也就是图片和文字的baseline
对齐,注意vetical-align只对inline-block元素有效,这种情况下,只需要对inline-block元素设置vertical-align:middle
即可实现垂直居中。效果如下:
父元素height为固定值
这种情况只需要在父元素上设置line-height属性等于父元素的height属性即可(line-height = height
),这种只适用于单行文本,且父元素高度固定,对于多行文本就无能为力了。
父元素height固定,子元素是块元素
子元素高度固定
这种情况下可以利用absolute
定位来实现垂直居中。缺点就是脱离了普通文档流。
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
height:200px;
margin-top:-100px;
}
// 或者下面的实现方法
.child {
position:absolute;
top:0;
bottom:0;
height:200px;
margin:auto 0;
}
子元素height不固定
该情况下对子元素是块级元素或非块级元素均可以。
.parent {
display:table-ceil;
height:200px;
vetical-align:middle;
}
该方法由于display:table-ceil
属性的兼容性不够好,只能在IE8及更高版本使用。
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}
该方法由于transform:translateY(-50%)
属性的兼容性不够好,只能在IE9及更高版本使用。
flex
.parent {
display:flex;
align-items:center;
}
flex弹性布局更加的灵活简单,对页面中其他元素的影响更小,在IE11以及更高版本才能兼容,如果是在移动端开发,尽量使用该属性实现各种复杂的布局。
常见的布局
两列布局
两栏布局:一栏定宽,一栏自适应,自适应的一栏作为内容主体。
1:使用float + margin属性。
.left {
width:200px;
float:left;
}
.right {
margin-left:200px;
}
也可以使用absolute定位来实现。
.container {
position:relative;
}
.left {
position:absoulte;
left:0;
width:200px;
}
.right {
position:absolute;
left:200px;
right:0;
}
三列布局
三列布局也是经常使用到的一种布局,它的特点是两边两列固定,中间自适应。
1:左右两栏使用float属性,中间栏使用margin属性。
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
.left,.right {
float:left;
width:200px;
}
.right {
float:right;
}
.middle {
margin:0 200px;
}
该方法必须要将中间栏放在最后,且如果父元素的宽度小于左右两栏宽度时,右侧栏会被挤下去。
2:使用position布局
.container {
position:relative;
}
.left,.right {
width:200px;
left:0;
}
.right {
left:auto;
right:0
}
.middle {
margin:0 200px;
}
该方法的缺点是如果父元素有内外边距的时候,会导致中间栏的位置出现偏差。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。