居中有哪几种实现方式

  1. 使用flex布局设置居中。容器设置 display: flex; align-items: center; justify-content: center;
  2. 使用flex 时也能通过给子项设置margin: auto实现居中。给容器设置 display: flex; 子项设置 margin: auto;
  3. 使用绝对定位的方式实现水平垂直居中。容器设置position: relative。孩子设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
  4. 还有一种不常用的方法实现垂直居中。给容器加给伪元素，设置line-height等于容器的高度。给孩子设置display: inline-block;
  5. 使用grid设置居中。给容器设置 display: grid; align-items: center; justify-content: center;
  6. 使用grid时还能通过给子项设置margin: auto实现居中。给容器设置 display: grid; 子项设置 margin: auto;
  7. 使用tabel-cell实现垂直居中。容器设置 display: table-cell; vertical-align: middle。孩子如果是块级元素，直接使用左右margin等于auto实现水平居中。如果是行内元素，给容器设置text-align: center；
  8. 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 position: absolute; 设置固定宽度和高度；top、left、bottom、right都设置为0; margin设置为auto；也能实现垂直水平居中。

    方式一：flex-给容器设置

    display: flex;写在父元素上这就是定义了一个伸缩容器
    justify-content 主轴对齐方式，默认是横轴
    align-items纵轴对齐方式，默认是纵轴 ```html
    hello

  1. [点击查看【codepen】](https://codepen.io/jirengu/embed/vYXLBrg)
  2. <a name="Otu5c"></a>
  3. ## 方式二：flex-给子项设置
  4. ```html
  5. <div class="box">
  6.   <div class="child">hello</div>
  7. </div>
  9. <style>
  10. .box {
  11.   width: 200px;
  12.   height: 200px;
  13.   border: 1px solid;
  14.   display: flex;
  15. }
  16. .child {
  17.   background: red;
  18.   margin: auto;
  19. }  
  20. </style>

点击查看【codepen】

方式三：绝对定位

https://jsbin.com/yusolipole/edit?html,css,output

  1. <div class="box">
  2.   <div class="child">hello</div>
  3. </div>
  5. <style>
  6. .box {
  7.   width: 200px;
  8.   height: 200px;
  9.   border: 1px solid;
  10.   position: relative;
  11. }
  12. .child {
  13.   position: absolute;
  14.   left: 50%;
  15.   top: 50%;
  16.   transform: translate(-50%, -50%);
  17.   background: red;
  18. }  
  19. </style>

剩下几种在这：其他设置居中的方式

简述下CSS选择器的权重与优先规则

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性。

如果两组选择器都定位到同一元素，且对同一属性设置不同的样式，则需要分别计算两组选择器的权重来确定优先级。一个选择器的优先级可以说是由四个部分计算得分，比较时按位比较。

  1. 千位： 如果声明在 style 的属性则该位得一分。
  2. 百位： 选择器中包含ID选择器则该位得一分。
  3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  4. 个位：选择器中包含标签选择器、伪元素选择器则该位得一分。

比如 #header p.content.active 得分为 0121。 .header p.active::before 的权重是 0022。前者权重大于后者。

用css实现一个三角形

原理是让一个元素没有宽高，但是给其边框设置足够的宽度，并让其中三条边框的背景色为透明transparent。

  1. <div class="border"></div>
  2. <style>
  3.   .border {
  4.       width: 0;
  5.       height: 0;
  6.       border: 50px solid;
  7.       border-color: transparent transparent red;
  8.   }
  9. </style>

三角形预览链接