1.左右布局

页面中常见的布局就是左右布局。
可以通过float元素的left或者right属性将元素左右浮动，之后将浮动元素的父元素加上一个类clearfix，清除两侧浮动。这是一个套路写法：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

还可以通过position属性实现左右布局。常见的如将position属性设置为absolute，然后将该元素的父元素的position属性设置为relative；再设置该元素的left或者right属性为0，也可以实现左右布局。如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:200px;
  top:0;
}

2.左中右布局

仍然是通过float元素实现，比如将一个列表ol中的li标签元素左浮动，然后给ol标签加一个父元素如div，然后将就可以给ol标签的display属性改为inline-block；之后给div标签加一个属性text-align:center;就可以将浮动元素实现居中布局，结合1就可以实现左中右布局。如下：

.parents {
    text-align: center;
}
.parent {
    display: inline-block;
}
.child {
    float: left;  
}

当然，通过position属性实现左中右布局会更加方便，只需要将left或者right属性设置为50%即可。

3.水平居中

块级元素的水平居中如下，注意不要忘记设置块级元素的width属性。

div {
width:200px;
margin:0 auto;
}

内联元素的水平居中设置其父元素的text-align属性为center即可。

4.垂直居中

1.内联元素垂直居中
将上下padding设置为相同即可

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

2.块级元素垂直居中

知道确定的高度

.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; */
}

高度无法确定，只需要在设置top之后，自身相对于Y轴负方向移动50%即可。

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

还可以使用flexbox，将会特别的简单。

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

5.用css画三角形

首先将元素内容区宽高设置为0，然后将边框设置为透明色，最终根据需要设置需要显示的颜色，设置三角形的朝向。

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

本文参考资料：