动态垂直居中

将父级元素设置为display:table,子元素设置disable:table-cell;vertical-align:middle,

1
2
3
4
5
6
7
.box-wrap{
	display:table;
}
.box{
	disable:table-cell;
	vertical-align:middle
}

演示如下：

See the Pen css-table布局使用 by 小白 (@wsdever) on CodePen.

动态水平居中

如水平导航，一般的作法是设置元素display:inline-block，然后设置外层无元素为text-align:center，这样做可以实现要求，但是导航同级的元素都会继承外层的这个属性。现在用display:table来实现。
在居中元素上设置display:table;margin:auto;

1
2
3
4
.wrap{
	display:table;
	margin:auto;
}

演示如下：

See the Pen css-table布局-动态水平居中 by 小白 (@wsdever) on CodePen.

赏

本文地址： http://wsdever.github.io/2016/10/09/20160815/