css 水平居中，垂直居中

<div class="box">
   <img src="./1.jpg" alt=""/>
</div>

第一种：水平居中

.box {
  width:300px;
  height:300px;
  border:2px solid red;
}
img{
  display:block;
  width:100px;
  height:100px;
  margin:0 auto;
}

第二种：水平居中

.box{
  width:300px;
  height:300px;
  border:2px solid red;
  text-align:center;
}
img{
  width:100px;
  height:100px;
  display:inline-block;
}

第三种：水平垂直居中 定位+需要居中元素的margin减去宽高的一半(取负值)

.box {
  width:300px;
  height:200px;
  border:1px solid red;
  position:relative;
}
img{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}

第四种：水平垂直居中 定位+margin:auto

.box{
  width:300px;
  height:200px;
  border:1px solid red;
  position:relative;
}
img{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:0 auto;
}

第五种：水平垂直居中  定位+transform

.box {
  width:300px;
  height:200px;
  position:relative;
  border:1px solid red;
}
img{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

第六种：水平垂直居中 display:table-cell

.box{
  width:300px;
  height:200px;
  border:2px solid red;
  display:table-cell;
  verticall-align:middle;
  text-align:center;
}
img{
  width:100px;
  height:100px;
}
.box-table{
  display:table
}
<div class="box-table">
  <div class="box">
    <img src="./1.jpg" alt=""/>
  </div>
</div>

第七种：垂直水平居中 flex

.box{
  width:300px;
  height:200px;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}
img{
  width:100px;
  height:100px;
}

 //其他css技巧

1、使用css重置（reset）

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

2、继承盒模型

     让盒模型从html继承：

 html{
   box-sizing:border-box;
 }
 *,*:before,*after{
   box-sizing:inherit
 }

3、使用flexbox布局来避免margin的问题

.flex-container{
  display:flex;
  justify-content:space-between;
}
.flex-contianr .item{
  flex-basis:23%;
}

4、使用:not() 解决lists边框的问题

//一般会使用
.nav li{
  border-right:1px solid red;
}
.nav li:last-child{
  border-right:none;
}
//换成这样子更好：
.nav li:not(:last-child){
  border-right:1px solid red;
}这句代码的意思就是：除了最后一个li以外，所有的.nav li 都加上了border样式。

5、body上加入line-height样式

行间距 line-height可以作为整个项目设置的一个属性。
body{
  line-heihgt:1.5; //只是告诉浏览器，让她渲染行高是渲染字体大小的1.5倍。
}

6、垂直居中任何元素

html,body{
  height:100%;
  margin:0;
}
body{
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  display:-webkit-flex;
  display:flex;
}

7、使用SVG icons

.logo{
  background:url('logo.svg')
}
//如果将svg用在交互的元素上比如说button，svg会产生无法加载的问题。可以通过下面这个规则来确保svg可以访问
到(确保在HTML中已设置适当的aria属性)
.no-svg .icon-only:after{
  content:attr(aria-label)
}

8、使用 OWL选择器

//使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector)+
可以提供一个强大的css功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则
*+*{
  margin-top:1.5rem (他们直接至少有1.5rems的间距，大概30px)
}

9、一致的垂直结构

如果owl选择器过于通用，可以在元素内使用通用选择器*为布局的特定部分创建一致的垂直节奏：
.intro > *{
  margin-bottom
}

10、等宽表格单元格

.calendar{
  table-layout:fixed
}
//使用这个来保持单元格相等宽度

11、使用rem进行全局大小调整，使用em进行局部大小调整

在设置根目录的基本字体大小后，例如html字体大小：15px；
可以将包含元素的字体大小设置为 rem;
article{
  font-size:1.25rem;
}
aside{
  font-size:0.9rem
}
然后将文本元素的字体大小设置为 em
h2{
  font-size:2rem;
}
p{
  font-size:1em;
}

12、css变量

<style>
   :root{
      --main-color:#fff;
      --accent-color:green;
   }
   h1{
      color:var(--main-color);
   }
   p{
      color:var(--accent-color);
   }
</style>

 13、布局问题

水平居中：
    行内元素： text-align:center
    块级元素： margin: 0 auto;
    absolute + transform
    flex+justify-content:center

垂直居中：
    line-height:height
    absolute + transform
    flex+align-items:center
    table

水平垂直居中：
    absolute + transform
    flex+ justify-content + align-items

14、link 与 @import 的区别

link 功能较多，可以定义RSS，rel等作用，而@import只能用于加载 css 
当解析到link时，页面会同步加载所引的 css ,而 @import 所引用的css会等到页面加载完才被加载。
@import 需要 IE5以上才能使用
link可以使用js动态引入，@import不行