常见的两列布局:
两列固定宽度:用一个父容器将两列包裹在内,对父标签设置固定宽度和overflow:hidden,再对两列设置固定像素宽度。
两列自适应:将左右两列设置浮动,宽度属性设置为百分比形式,然后给受浮动影响的元素清除浮动。
一侧固定一侧自适应:
- 一侧设置固定宽度,并设置绝对定位,另一侧根据宽度设置margin。
- 利用CSS3 flex属性。
常见的三列左右固定宽度,中间自适应布局:
- 负外边距法
- 绝对定位法
- flex属性法
具体实现代码可参考:
常用布局的实现(两列布局、三列适应布局,两列等高适应布局等) - nalee - 博客园
水平居中
- 行内元素设置text-align: center
- 块级元素设置固定宽度,margin-left和margin-right设置为auto
- 元素设置固定宽度,margin-left:设为元素宽度的一半,并设置position:absolute;left:50%;
- 固定宽高,父元素{display:flex;flex-direction:column;},子元素{align-self:center;}
具体实现代码可参考:
垂直居中
- display:inline-block;text-align: center; vertical-align:middle
- 元素设置固定高度,margin-top:设为元素高度的一半,并设置position:absolute;top:50%;
- 为父元素添加伪元素::before{content:'';display:inline-block;vertical-align:middle;height:100%},子元素{width:50%;height:50%;display:inline-block;vertical-align:middle;}
- 固定宽高,父元素{display:flex;flex-direction:row;},子元素{align-self:center;}