1. 对齐
文本在元素内居中对齐， text-align: center;
要水平居中对齐块级元素(如 <div>), 可以使用 margin: auto;。元素通过指定宽度，并将两边的空外边距平均分配：
设置行高为100%,表示垂直方向居中显示。
设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：
- 1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
- 2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。
2. 伪类
CSS伪类是用来添加一些选择器的特殊效果。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a :nth-of-type(n) 选取路径下第n个元素
a:after 在指定元素之后插入内容
下拉列表：
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min- 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
3. 弹性盒flex布局
使用display设置弹性盒布局，采用flex布局的元素，称为flex容器，容器默认存在两根轴：横轴和纵轴。
当将flex-direction设为column值时，align-items作用于横轴，justify-content作用于纵轴
属性：
1. flex-direction属性：决定主轴的方向（即项目的排列方向）。
- row（默认值）：主轴为水平方向，起点在左端；
- row-reverse：主轴为水平方向，起点在右端；
- column：主轴为垂直方向，起点在上沿；
- column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap属性：
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- nowrap（默认）：不换行；
- wrap：换行，第一行在上方；
- wrap-reverse：换行，第一行在下方。
3. justify-content属性：定义了项目在主轴上的对齐方式。
- flex-start（默认值）：左对齐；
- flex-end：右对齐；
- center： 居中；
- space-between：两端对齐，项目之间的间隔都相等；
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
4.align-items属性：定义项目在交叉轴上如何对齐。
- flex-start：交叉轴的起点对齐；
- flex-end：交叉轴的终点对齐；
- center：与交叉轴的中点对齐；
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。
对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
例如：