1.如何画一个三角形？
思路：主要靠边框撑开内容，再配合多余区块颜色的透明
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <meta name="author" content="杨欣">
9 <title>css三角形</title>
10 <style>
11 .triangle{
12 width: 0;
13 height: 0;
14 border-width: 40px;
15 border-style: solid;
16 border-color: transparent transparent transparent red;
17 /*border-color的四个值代表上右下左，分别实现下左上右箭头 */
18 }
19 </style>
20 </head>
21
22 <body>
23 <div class="triangle"></div>
24 </body>
25
26 </html>2.水平垂直居中的实现方式有哪些？
方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin: auto;注意：IE7及之前版本不支持；
.wrapper1 {
position: relative;
}
.center1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半
.wrapper2 {
position: relative;
}
.center2 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
.wrapper3 {
position: relative;
}
.center3 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
方案四：父级转变为弹性盒子，主轴交叉轴居中对齐
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中