【CSS基础笔记】两列、三列布局；水平居中；垂直居中

常见的两列布局：

两列固定宽度：用一个父容器将两列包裹在内，对父标签设置固定宽度和overflow:hidden，再对两列设置固定像素宽度。

两列自适应：将左右两列设置浮动，宽度属性设置为百分比形式，然后给受浮动影响的元素清除浮动。

一侧固定一侧自适应：

1. 一侧设置固定宽度，并设置绝对定位，另一侧根据宽度设置margin。
2. 利用CSS3 flex属性。

 

常见的三列左右固定宽度，中间自适应布局：

1. 负外边距法
2. 绝对定位法
3. flex属性法

具体实现代码可参考：

常用布局的实现（两列布局、三列适应布局，两列等高适应布局等） - nalee - 博客园​www.cnblogs.com

 

水平居中

1. 行内元素设置text-align: center
2. 块级元素设置固定宽度，margin-left和margin-right设置为auto
3. 元素设置固定宽度，margin-left：设为元素宽度的一半，并设置position：absolute；left：50%；
4. 固定宽高，父元素{display:flex;flex-direction:column;}，子元素{align-self:center;}

具体实现代码可参考：

把简单做好也不简单-css水平垂直居中​xdlrt.github.io

 

垂直居中

1. display：inline-block；text-align: center; vertical-align:middle
2. 元素设置固定高度，margin-top：设为元素高度的一半，并设置position：absolute；top：50%；
3. 为父元素添加伪元素::before{content:'';display:inline-block;vertical-align:middle;height:100%}，子元素{width:50%;height:50%;display:inline-block;vertical-align:middle;}
4. 固定宽高，父元素{display:flex;flex-direction:row;}，子元素{align-self:center;}