CSS 布局及居中技巧

在写这篇文章之前笔者思考了很久，不知如何起手？后来想了想不就CSS布局这点事嘛，今天我们就来说说CSS一些常见的布局。

CSS用什么布局

1. normal flow正常文档流
2. float + 清除浮动
3. position绝对定位
4. flex布局

---

接下来我们就来演示几个列子：

左右布局

1. 使用float实现
HTML代码：

CSS代码：

.box{
    width: 300px;
    height: 200px;
    border: 2px solid black;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.LeftBox{
    width: 100px;
    height: 100%;
    background: red;
    float: left;
}
.RightBox{
    width: 200px;
    height: 100%;
    background: green;
    float: left;
}

效果：

float左右布局

2. 使用position实现
HTML代码：

CSS代码：

.box{
    width: 300px;
    height: 200px;
    border: 2px solid black;
    position: relative;
}
.LeftBox{
    width: 100px;
    height: 100%;
    background: red;
    position: absolute;
    top: 0px;
    left: 10px;
}
.RightBox{
    width: 180px;
    height: 100%;
    background: green;
    position: absolute;
    top: 0px;
    left: 110px;
}

效果：

position左右布局

3. 使用flex实现

HTML代码：

CSS代码一：

.box{
    width: 300px;
    height: 200px;
    border: 2px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.LeftBox{
    width: 100px;
    height: 100%;
    background: red;
}
.RightBox{
    width: 180px;
    height: 100%;
    background: green;
}

效果：

flex左右布局效果一

CSS代码二：
此种布局中左边盒子宽度固定，右边盒子宽度随大盒子的宽度变化而变化

.box{
    max-width: 300px;
    height: 200px;
    border: 2px solid black;
    display: flex;
    align-items: center;
}
.LeftBox{
    width: 100px;
    height: 100%;
    background: red;
    flex-shrink: 0;
}
.RightBox{
    width: 100%;
    height: 100%;
    background: green;
}

效果：

flex左右布局效果二

左中右布局

1. 使用float实现
HTML代码：

CSS代码：

.box{
    width: 600px;
    height: 200px;
    border: 2px solid black;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.LeftBox{
    width: 100px;
    height: 100%;
    background: red;
    float: left;
}
.MiddleBox{
    width: 200px;
    height: 100%;
    background: green;
    float: left;
}
.RightBox{
    width: 200px;
    height: 100%;
    background: yellow;
    float: left;
}

效果：

float左中右布局

2. 使用position实现
HTML代码：

CSS代码：

.box{
    width: 600px;
    height: 200px;
    border: 2px solid black;
    position: relative;
}
.LeftBox{
    width: 180px;
    height: 100%;
    background: red;
    position: absolute;
    top: 0px;
    left: 10px;
}
.MiddleBox{
  width: 200px;
  height: 100%;
  background: green;
  position: absolute;
  top: 0px;
  left: 200px;
}
.RightBox{
    width: 180px;
    height: 100%;
    background: yellow;
    position: absolute;
    top: 0px;
    right: 0px;
}

效果：

position左中右布局

3. 使用flex实现

HTML代码：

CSS代码一：

.box{
    width: 600px;
    height: 200px;
    border: 2px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.LeftBox{
    width: 180px;
    height: 100%;
    background: red;
}
.MiddleBox{
    width: 180px;
    height: 100%;
    background: green;
}
.RightBox{
    width: 180px;
    height: 100%;
    background: yellow;
}

效果：

flex左中右布局效果一

CSS代码二：
此种布局中左右两边盒子宽度固定，中间盒子宽度随大盒子的宽度变化而变化

.box{
    max-width: 600px;
    height: 200px;
    border: 2px solid black;
    display: flex;
    align-items: center;
}
.LeftBox{
    width: 200px;
    height: 100%;
    background: red;
    flex-shrink: 0;
}
.MiddleBox{
    width:  100%;
    height: 100%;
    background: green;
    flex-shrink: 1;
}
.RightBox{
    width: 200px;
    height: 100%;
    background: green;
    flex-shrink: 0;
}

效果：

flex左中右布局效果二

---

CSS居中技巧

说完布局，接下来我们来讲讲CSS中关于居中的问题，CSS中居中的方法有很多，而且难度不高，只要稍做钻研就能灵活运用！

1. text-align

在父容器里水平居中 inline 文字，或 inline 元素

2. margin

只要 margin: auto;在，块级元素将垂直居中，top, left, bottom, right 可以设置偏移。常见用法：margin: 0 auto;此时块级元素水平居中

3. padding

原理同上

4. line-height

与 height 联手，垂直居中文字

5. flex

使容器内部元素居中

.Flexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

6. vertical-align

垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

7. position + translate

translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

8. 绝对定位居中

父容器元素：position: relative

.Absolute-Center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
 }

9. 视口居中

内容元素：position: fixed，z-index: 999，父容器元素 position: relative

.Viewport-Center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
}