【CSS基础】CSS常见问题

垂直居中

单行文本垂直居中

父元素高度为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;
}

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