左右布局
左右布局只要使左边的块级元素向左浮动，右边的向右浮动即可。但要记得因为子元素浮动会造成父元素的高度坍塌，所以需要在父元素上使用.clearfix:after清除浮动。
左右1.jpg
左右2.jpg
左中右布局
左中右布局比左右布局多了中间一个元素，那么就只能全部向左浮动了。这里为了演示令三个元素拥有同样的宽度，实际使用需要根据内容添加margin。同样需要为父元素清除浮动。
左中右1.jpg
左中右2.jpg
水平居中
-
内联元素
要使内联元素居中，为父元素添加text-align:center即可。
水平居中-内联.jpg
-
块级元素
-
不固定宽度
要使不固定宽度的块级元素居中，需要为父元素添加左右相等的padding。
水平居中-块级-不固定宽.jpg
-
固定宽度
要使固定宽度的块级元素居中，让这个元素自动计算水平方向的margin的值即可，左右margin值会相等。
水平居中-块级-固定宽.jpg
垂直居中
- 内联元素
要使内联元素垂直居中，需要为父元素添加上下相等的padding。
垂直居中-内联.jpg
- 块级元素
块级元素的垂直居中复杂一些，需要使用绝对定位，使它自己的顶部距离父元素顶部50%的距离，再使用tranform: translateY(-50%)使它自己向上缩进自身高度的50%以实现视觉上的居中。
垂直居中-块级.jpg
网友评论