3

垂直居中

单行文本垂直居中

父元素高度为auto

一个父元素如果不设置高度的话,默认就是紧包裹着子元素,如果父元素设置的pading-toppadding-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;
}

该方法的缺点是如果父元素有内外边距的时候,会导致中间栏的位置出现偏差。


熟悉的陌生人
330 声望17 粉丝

如果我有一本书...