话说CSS居中和CSS布局

水平居中
(1)内联元素

.center-children {
  text-align: center;
}

(2)块级元素

.center-me {
  margin: 0 auto;
}

(3)多个块级元素
第一种方法：我们将多个块级元素运用display：inline-block，转换为内联元素，然后运用text-align：center来处理。

<main class="inline-block-center">
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
    </div>
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
</main>

.inline-block-center {
    text-align: center;
}
.inline-block-center div {
    display: inline-block;
    text-align: left;
}

第二种方法：运用flex。

<main class="flex-center">
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
    </div>
    <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
    </div>
</main>

.flex-center {
    display: flex;
    justify-content: center;
}

垂直居中
(1) 单行内联元素
第一种方法：上下设置相同的padding。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

第二种方法：运用行高, 注意是不能换行的。

.link {
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
}

(2) 多行内联元素

.parent-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

(3) 块级元素

情况一：定高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

情况二：不定高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

情况三：运用flex

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

情况一：定高定宽

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

情况二：不定宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

情况三：运用flex

.parent {
  display: flex;
  //水平居中
  justify-content: center;
  //垂直居中
  align-items: center;
}

情况四：运用grid

body, html {
  height: 100%;
  display: grid;
}
span {
  margin: auto;
}

固定宽度布局

4.1 左右布局（两列布局）
html代码：

<div class="container clearfix">
    <div class="left-box">左侧列</div>
    <div class="right-box">右侧列</div>
 </div>

CSS代码：

.left-box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.right-box {
    float: left;
    width: 200px;
    height: 100px;
    background-color: red;
}

4.2 左中右布局（三列布局）
三列布局同两列布局的原理，使用float浮动。
html代码：

<div class="container clearfix">
    <div class="left-box">左侧列</div>
    <div class="mid-box">中间列</div>
    <div class="right-box">右侧列</div>
 </div>

CSS代码：

.left-box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.mid-box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
}
.right-box {
    float: left;
    width: 200px;
    height: 100px;
    background-color: red;
}

自适应布局

5.1左右布局（两列布局）
假设左侧列定宽，右侧列自适应。
(1) 自适应宽度运用calc计算。
CSS代码:

.left-box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.right-box {
    float: left;
    width: calc(100% - 100px);
    height: 100px;
    background-color: red;
}

(2)结合绝对定位
CSS代码：

.container {
  position: relative;
  height: 100px;
}
.left-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.right-box {
    margin-left: 100px;
    height: 100px;
    background-color: red;
}

5.2 左中右布局（三列布局，中间栏自适应）

(1) 使用float浮动
html代码：

<div class="container clearfix">
    <div class="left-box">左侧列</div>
    <div class="right-box">右侧列</div>
    <div class="mid-box">中侧列</div>
</div>

CSS代码：

.container {
    height: 100px；
}

.left-box {
    float: left;
    width: 300px;
    height: 100%;
    background-color: red;
}
.mid-box {
    margin: 0 300px;
    height: 100%;
    background-color: green;
}
.right-box {
    float: right;
    width: 300px;
    height: 100%;
    background-color: blue;
}

注意：在html代码中，右侧列和中间列位置对换，如果不换，右侧列会换行。原因是：浮动的三栏布局（中间栏自适应）中，因为中间列是没有设置浮动定位，所以中间div没有脱离文档流，默认是block，块状元素会占满整行，导致右侧列是从下一行开始向右浮动。要使浮动的三列布局起效，要调整一下html的布局。

(2) 结合定位布局
html代码：

<div class="container clearfix">
    <div class="left-box">左侧列</div>
    <div class="right-box">右侧列</div>
    <div class="mid-box">中侧列</div>
</div>

CSS代码：

.left-box {
    position: absolute;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: red;
}
.mid-box {
    margin: 0 300px;
    height: 100%;
    background-color: green;
}
.right-box {
    position: absolute;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: blue;
}

话说CSS居中和CSS布局

推荐阅读更多精彩内容