CSS

CSS伸缩布局与居中

文字居中

垂直居中

可以将margin、padding设置为固定的值，从而达到文字居中的目的。由于长度一般不确定，所以此方法可以实现文字垂直居中。
或设置段落line-height，则文字自动实现相对段落垂直居中。
当一个内联行中元素高度不同时，可以使用vertical-align设置行内元素对齐方式。

水平居中

设置text-align为center可以实现文字水平方向居中

块级元素居中

给所有的包含块以及子块设置margin可以实现水平与垂直居中，但是要求知道这些块的大小，此处省略此方法。

margin设为auto

可以实现垂直排列，水平居中。
如果一个块outer包含一个块inner，在水平方向居中。则可以将inner的margin-left和margin-right设为auto，则可以完成水平居中(此为css2.1标准规定的特性，但不能垂直居中)。如果对一个块中的所有子块应用此方法，所有子块都可以实现水平方向居中，且从上到下排列。

1
2
3
.inner {
    margin: 10px auto;
}

转为内联元素

可以实现元素水平排列，且处于水平/垂直居中位置。将子元素转为内联元素后，与上述文字居中表现相同。

1
2
3
4
5
6
7
.outer {
    text-align: center;
    vertical-align: middle;//指定所有子元素对其方式，不能相对父容器垂直居中
}
.inner {
    display: inline-block;
}

转为绝对定位

可以实现绝对的居中。
由于使用绝对定位，所以脱离正常文档流，不受其他元素影响。由于使用绝对定位，所有有一定的副作用。

1
2
3
4
5
6
7
8
9
10
11
.outer {
    positon: relative;
}
.inner {
    positon: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

其他

此外，还可以将display设为table，然后进行相关配置，或者使用百分比、浮动等，虽然都可以实现，但并不好。比较好的方法，还是转为可伸缩盒。

flexbox

flexbox是一个很好的实现布局的盒子模型。此处仍然以outer为父容器，inner为子元素为例。

1
2
3
4
5
6
7
8
9
.outer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.inner {
    flex: 1;
}
  • 伸缩容器display：flex|inline-flex。
  • 伸缩流方向flex-direction：row|row-reverse|column|column-reverse
  • 伸缩换行flex-wrap: nowrap|wrap|wrap-reverse
  • flex-flow: <’flex-direction’> || <’flex-wrap’>
  • 主轴对齐justify-content：flex-start|flex-end|center|space-between|space-around
  • 侧轴对齐align-items：flex-start|flex-end|center|baseline|stretch
  • 侧轴对齐align-self：flex-start|flex-end|center|baseline|stretch ——inner子容器
  • 堆栈伸缩行align-content：flex-start|flex-end|center|space-between|space-around|stretch
  • 伸缩性flex：none|[<’flex-grow’><’flex-shrink’>?||<’flex-basic’>] ——inner子容器
  • 显示顺序order： ——inner子容器

资源

测试例子
一个获取居中代码的网站