居中的方式

1、水平居中

width: 100px;
margin: 0 auto;

如果是字体的话，最好的居中方式text-align: center

2、水平垂直居中

• 不知道容器的宽高，这也是最常用的一种方法

  


#app {
  position: fixed或者absolute; // 总之要脱离普通的文档流，fixed就是浏览器的窗口大小
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: pink;
  height: 100%;
  width: 100%; // 必须写上
}
.global {
  position: absolute;（绝对定位、相对定位都可以）
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: yellow;
}

• 知道容器的宽高

  


#app {
  position: fixed或者absolute; // 总之要脱离普通的文档流
  width: 100%;
  height: 500px;
  background: pink;
}
.global {
  position: absolute;（绝对定位、相对定位都可以）
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  // transform: translate(-50%, -50%); 
  margin: -50px 0 0 -50px; // 边距设置为宽高的负一半值
}

• flex布局，使用非常方便，但要注意兼容性，在IE上有很大的问题

  


#app {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  background: pink;
}
.global {
  width: 100px;
  height: 100px;
  background: yellow;
}

为整张页面设置背景色有两种方式

1、在根元素html当中设置，这种方法有一弊端，整个项目都会有所设置的属性
2、在最外层的div中设置，但会产生一个问题，background不会占满整个屏幕，因为每个浏览器都有默认的
margin值，要解决这个问题，就是在body中，把margin的值重置为0

总结：

1、普通文档流（normal flow）默认width: auto; height: auto，width默认会与浏览器的窗口对齐，因为高
度是可以无限延长的，所以把height: 100%这样设置并不管用，必须给html、body也加上这个属性才管用。

2、当position: absolute(fixed)，此时已经脱离普通文档流了，也意味着没有width: auto; 
height: auto默认属性了，所以width、height都随自己设置，如果要满屏的话，
width: 100%; height: 100%