一.CSS基本布局

1.固定宽度布局

1.1. 一列水平居中布局
一列的宽度固定为已知值，使用margin设置来达到水平居中效果。
html代码：

<!DOCTYPE html>
<html>
<head>
    <title>一列水平居中布局</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="one-center-col">一列布局</div>
</body>
</html>

CSS代码:

<style>
    .one-center-col {
          width: 1000px;
          height: 700px;
          background-color: yellow;
          margin: 0 auto;
    }
</style>

效果截图：

一列布局
其中对于宽度固定的元素，只需要设置该元素的CSS样式（margin:0 auto;）就可以实现该元素在其父元素的宽度下水平居中对齐显示。

1.2两列布局（浮动）
网页布局常见左右两列布局，如果已知左右两列的宽度是固定值，则可以使用FLOAT浮动方式完成基本布局排版。
HTML代码

    <div class="container">
        <div class="leftbox">左侧列</div>
        <div class="rightbox">右侧列</div>
    </div>

CSS代码

.leftbox {
  width: 300px;
  height: 100%;
  background-color: #aadddd;
  float: left;
}     
.rightbox {
  width: 700px;
  height: 100%;
  background-color: #f08844;
  float: right;
}

效果截图：

在这里插入图片描述
两列布局，当已知列的宽度时，可以使用浮动属性来大道左右布局的效果，仅需设置float:left和float:right就可以轻松达到页面布局效果。

1.3三列布局

三列水平
布局，如果列的宽度都是固定的，实现方式与上面两列布局相似，使用浮动即可达到效果。
html代码：

<body>
    <div class="container">
        <div class="leftbox">左侧列</div>
        <div class="midbox">中间列</div>
        <div class="rightbox">右侧列</div>
    </div>

css代码：

.container {
  width: 1100px;
  height: 700px;
}
.leftbox {
  width: 300px;
  height: 100%;
  float: left;
  background-color: #ABDDDE;
}
.midbox {
  width: 400px;
  height: 100%;      
  float: left;
  background-color: #F18747;
}
.rightbox {
  width: 300px;
  height: 100%;
  float: right;
  background-color: #AB11DD;
}

效果截图：
在这里插入图片描述
leftbox和midbox设置左浮动，rightbox设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。

2.自适应宽度布局

两列布局（实现效果：两列自适应宽度）
思路：实现自适应两列布局，可以继续使用浮动方式来布局，但在设置浮动元素的宽度时，不再使用固定值，而要使用百分比，从而实现宽度的自适应。
两列布局（实现效果：左侧为固定宽度，右侧自适应）
1）使用浮动来进行自适应布局

.leftbox {
    width: 300px;
    height: 100%;
    background-color: #aadddd;
    float: left;
}
.rightbox {
    height: 100%;
    margin-left: 300px;
    background-color: #f08844;
}

基本思路分析：
1.左侧设置固定宽度并设置浮动float:left;
2.右侧不设置宽度，只设置左侧边距为左侧栏的宽度加上左侧与右侧的间距margin-left
2）使用定位来进行布局：

.container {
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  position: relative;
}
.leftbox {
  width: 300px;  /*左侧固定宽度值*/
  height: 100%;
  position: absolute;
}
.rightbox {
  height: 100%;
  margin-left: 300px; /*边距值=左侧固定宽度值*/
  position: relative;
}

基本思路分析：
1.父元素设置为position:relative;
2.leftbox设置固定宽度，设定为绝对定位position:absolute。
3.rightbox设置为相对定位position:relative。（使其遮盖左侧栏）
4.rightbox设置左边距，边距值margin-left刚好为左侧栏的宽度。
截图展示：
在这里插入图片描述

三列布局：中间自适应（实现效果：原理类似于两列布局）
1）使用浮动来布局
核心思想：中间列自适应。

.leftbox {
  width: 300px;
  height: 100%;
  background-color: #aadddd;
  float: left;
}      
.midbox {
  margin: 0 300px;
  height: 100%;
  background-color: #aa11dd;
}
.rightbox {
  width: 300px;
  height: 100%;
  background-color: #f08844;
  float: right;
}

基本思路分析：
1.左侧以及右侧设置固定宽度，并且分别设置左右浮动。
2.中间栏设置左右边距，边距值刚好分别等于左右侧栏的宽度。

2）使用定位来布局

.container {
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    position: relative;
}
.leftbox {
    width: 300px;
    height: 100%;
    position: absolute;
    left: 0;
}
.midbox {
    margin: 0 300px;
    height: 100%;
    position: relative;
}
.rightbox {
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

思路分析：
1.父元素设置position:relative;
2.leftbox和rightbox设置position:absolute;并且设置左右侧栏的宽度值。
3.midbox设置position:relative;
4.midbox设置左右margin值，正好对应左右侧栏的宽度值（margin=leftboxWidth/rightboxWidth）。

截图展示：
在这里插入图片描述

二.CSS居中方式

1.水平居中

1.1 内联元素水平居中

利用text-align:center可以实现在块级元素内部的内联元素水平居中。此方法对内联元素（inline），内联块（inline-table），inline-flex元素水平居中都有效。
核心代码：

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

1.2块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
核心代码：

.center-block {
  margin: 0 auto;
}

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
核心代码：

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

1.3.2 利用display:flex

利用弹性布局（flex），实现水平居中，其中justify-content用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
核心代码：

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

2. 垂直居中

2.1单行内联（inline）元素垂直居中

通过设置内联元素的高度和行高相等，从而使元素垂直居中。
核心代码：

#v-box {
    height: 120px;
    line-height: 120px;
}

2.2 多行元素垂直居中

2.2.1 利用表布局（table）

利用表布局的vertical-align:middle可以实现子元素的c垂直居中。
核心代码：

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

2.2.2 利用flex布局

利用flex布局实现垂直居中，其中flex-direction:column定义主轴方向为纵向。
核心代码：

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

2.2.3 利用“精灵元素”

利用“精灵元素”（ghost element）技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
核心代码：

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一般，就可以实现垂直居中了。
核心代码：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

2.3.2 未知高度的块级元素

当垂直居中的元素的高度和宽度未知时，我们可以借助css3中的transform属性向Y轴反方向偏移50%的方法实现垂直居中。
核心代码：

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

3.水平垂直居中

3.1固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。
核心代码：

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

3.2未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都反方向平移宽高的一般，从而使元素水平垂直居中。
核心代码：

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

3.3 利用flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：

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

3.4 利用Grid布局

利用grid实现水平垂直居中，兼容性较差。
核心代码：

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

3.5 屏幕上水平垂直居中

屏幕上水平垂坠居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
核心代码：

/*方法一*/
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}
/*方法二*/
.element{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

三.css小技巧

1. 图片宽度的自适应

如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：

img {max-width: 100%}

2. 3D按钮

要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。

 　　div#button {
    　　　　background: #888;
    　　　　border: 1px solid;
    　　　　border-color: #999 #777 #777 #999;
    　　}

3.透明

将一个容器设为透明，可以使用下面的代码：

    　　.element {
    　　　　filter:alpha(opacity=50);
    　　　　-moz-opacity:0.5;
    　　　　-khtml-opacity: 0.5;
    　　　　opacity: 0.5;
    　　}

在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。

4.用图片替换文字

有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：

    　　h1 {
    　　　　text-indent:-9999px;
    　　　　background:url("h1-image.jpg") no-repeat;
    　　　　width:200px;
    　　　　height:50px;
    　　}

5.固定位置的页首

当页面滚动时，有时需页首在位置固定不变，CSS可以这样写：

    　　body{ margin:0;padding:100px 0 0 0;}

    　　div#header{
    　　　　position:absolute;
    　　　　top:0;
    　　　　left:0;
    　　　　width:100%;
    　　　　height:<length>;
    　　}

    　　@media screen{
    　　　　body>div#header{position: fixed;}
    　　}

    　　* html body{overflow:hidden;}

    　　* html div#content{height:100%;overflow:auto;}

CSS布局&居中方式&CSS小技巧