CSS 如何布局与居中

左右布局

可以使用双浮动完成左右布局效果：

1. 子元素添加 float
2. 父元素添加上 clearfix 类，清除浮动效果后父元素的塌陷
   

html 代码如下：

  <div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
  </div>

css 代码如下：

clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.leftChild{
  float: left;
  width: 50%;
  height: 100px;
  background: red;
}
.rightChild{
  float: right;
  width: 50%;
  height: 100px;
  background: green;
}

效果如下：

左中右布局

--- 使用双浮动完成左中右布局效果与之前用法相同，只是多一条<div>，不再演示 ---

同时也可使用绝对定位完成左中右布局：

1. 父元素添加position: relative;
2. 子元素添加position: absolute;
3. 子元素使用top: $px; botton: $px; left: $px; right: $px;进行定位
   

html 代码如下：

<div class="parent">
    <div class="leftChild"></div>
    <div class="middleChild"></div>
    <div class="rightChild"></div>
  </div>

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
  position: relative;
}
.leftChild{
  width: 30%;
  height: 100px;
  background: red;
  position: absolute;
  left: 0;
}
.rightChild{
  width: 30%;
  height: 100px;
  background: green;
  position: absolute;
  right: 0;
}
.middleChild{
  width: 30%;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 35%;
}

效果如下：

水平居中

html 元素

块级元素

添加 margin: 0 auto; 使其元素水平居中

html 代码如下：

  <div class="parent">
    <div class="child"></div>
  </div>

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 20%;
  margin: 0 auto;
}

效果如下：

内联元素

添加 display: block; 转化成块级元素，然后按照块级元素水平居中。

元素内容

块级元素内容

添加 text-align: center; 使其内容水平居中

html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 60%;
  margin: 0 auto;
  text-align: center;
}

效果如下：

内联元素内容

添加 display: block; 转化成块级元素，然后按照块级元素内容水平居中。

垂直居中

html 元素

块级元素

添加 position: absolute; 使其元素绝对定位，再利用 top: $px; 定位

html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
}

效果如下：

内联元素

添加 display: block; 转化成块级元素，然后按照块级元素垂直居中。

元素内容

块级元素内容

添加 line-height: height($)px; 使其 元素内容行高 = 块级元素高度。
html 代码如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>

css 代码如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
  line-height: 50px;
}

效果如下：

内联元素内容

添加 display: block; 转化成块级元素，然后按照块级元素内容垂直居中。

其他小技巧

块级元素添加 display： inline-block; 后，会发生什么？

• 块级元素宽度收缩
  块级元素不写宽度的情况下，默认宽100%（占据一行）。
  加入inline-block，宽度自动适合内容。

• 块级元素下方会产生空隙
  解决方法：添加vertical-align: top;，清除空隙效果。