静态页面的css总结（居中，背景图片） 最全解！

1 居中

水平居中

行内元素水平居中

这里的行内元素指的是文本text，图像img，超链接a，按钮等

text-align: center;    /*在父元素上设置*/

块级元素水平居中

1.改变块级元素的display属性为inline-block，然后给父级元素设置text-align: center

#div4 {
        text-align: center
}
#div5 {
    display: inline-block;
    background-color: blue;
}

<div id="div4">
	<div id="div5">不定宽元素水平居中</div>
</div>

2.利用绝对定位
（1)元素宽高已知的情况下，让元素向右偏移50%，margin-left设为负值，可以让元素相对于自己原来的位置向左移动相应的距离。

#div6 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        margin-left: -100px; 
        background-color: yellow;
}
<div id="div6">定宽元素水平居中</div>

(2)元素宽高已知的情况下，利用神奇的margin： 0 auto；
auto 只会取父元素剩余空间的宽度和0两个值，当元素的布局方式为 static/relative 且宽高已知时，auto 取父元素剩余空间的宽度；当元素的布局方式为 postion/absolute/fixed 或者 float/inline 或者宽高未知时，auto 就取 0。

利用元素的流体特性：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

#div3 {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: pink;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
  }

（3）元素宽高未知的情况下，动画属性：让元素向右偏移50%，然后再向左偏移自身的50%；

#div6 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: yellow;
}
<div id="div6">不定宽元素水平居中</div>

3. 利用flex实现水平居中

#div1 {
        display: flex;
}
#div2 {
       background-color: pink;
       margin: 10px auto;
}

<div id="div1">
    <div id="div2">不定宽元素水平居中</div>
</div>

#div1 {
        display: flex; /*对父元素应用flex布局*/
        justify-content: center; /*设置主轴方向（默认水平方向）的子元素居中排列*/
}
#div2 {
    	background-color: pink;
}
<div id="div1">
    <div id="div2">不定宽元素水平居中</div>
</div>

垂直居中

几种方法：
1. 绝对定位（绝对定位元素的水平垂直居中）
如果子元素高度不知，还可以使用transfrom。
这种方法多用于绝对定位元素的水平垂直居中（宽高已知或者未知都可以。）

#div0 {
         width: 400px;
          height: 400px;
          background-color: pink;
          position: relative;
    }
#div2 {
	    width: 100px;
	    height: 100px;
	    background-color: yellow;
	    position: absolute;  //绝对定位
	    left: 50%;
	    top: 50%;    //先偏离高度父元素的50%
	    transform: translate(-50%,-50%);  /*css3的方法*/
	    /*margin-left: -50px;
	    margin-top: -50px;   如果元素宽高已知*/
}
<div id="div0">
	<div id="div2">div2垂直居中</div>
</div>

2. 通过绝对定位结合margin: auto(绝对定位元素的垂直居中)
这种方法多用于绝对定位元素的垂直居中。被居中元素的宽度也可以不设置，但是不设置的话，就必须是图片这种自身就包含尺寸的元素，否则无法实现。

#div0 {
        width: 400px;
          height: 400px;
          background-color: pink;
          position: relative;
}
#div2 {
	width: 100px;
	height: 100px;
     background-color: yellow;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom:0;
     margin: auto
 }

3. 通过flex
这种方法大多用于多个子元素的水平垂直居中，宽高已知或者未知都可以。

#div0 {
            width: 400px;
            height: 400px;
            background-color: pink;
            display: flex;              /*flex布局*/
            align-items: center;        /*子元素垂直居中*/
            justify-content: center;   /*子元素水平居中*/
  }
#div2 {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
<div id="div0">
    <div id="div2">div2水平垂直居中</div>
</div>

4. table布局

#center {
  background-color: red;
  display: inline-block;     /* 因为table-cell理论上只能处理具备行内特性的元素布局 */
}

#container {
   width: 400px;
   height: 400px;
   background-color: black;
   display: table-cell;             /*设置父元素的display*/
   text-align: center;              /* 容器内子元素水平居中 */
   vertical-align: middle;         /* 容器内子元素垂直居中 */
 }

5. 通过line-height实现单行文本的垂直居中
设置子元素的line-height等于父元素的height，这种方法仅适用于单行文本的情况，且父元素的高度必须已知。

#div1 {
	width: 400px;
	height: 100px;
	background-color: pink;
}
p {
	line-height: 100px;
}

<div id="div1">
    <p>awefawe</p>
</div>

6. 给父元素设置padding实现子元素的垂直居中
给父元素设置相等的上下内边距，则子元素自然是垂直居中的，但是这个方法中父元素是不能设置高度的，要让它自动被填充起来。

#div0 {
            width: 400px;
            background-color: pink;
            padding: 100px 0;
        }
#div2 {
     width: 100px;
     height: 100px;
     background-color: yellow;
 }
 
 <div id="div0">
    <div id="div2">div2水平垂直居中</div>
</div>

2 背景图片

background
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image
各值之间用空格分隔，不分先后顺序。

background-size

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

1. 实现背景图片固定宽高比缩放
实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现，padding-top取值百分比是相对于包含块的宽度而定。

<style>
    .con {
      width: 100%;
      padding-top: 140%;
      background: url('image/一寸照.jpg') no-repeat;
      background-size: cover;
    }
  </style>

2. 让背景图片铺满容器而不变形的方法
这种方法适用于图片铺满整个浏览器窗口：

#app {
        /*图片铺满整个浏览器窗口,设置在body身上也可以*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('./img/bg.png') no-repeat;
        background-size: cover;
        z-index: -1;
}

<body>
    <div id="app"></div>
</body>

这种方法只能用于铺满指定高度的容器

 #app {
        height: 500px;  /*图片铺满整个容器，只能用于铺满指定高度的容器*/
        width: 100%;
        background: url('./img/bg.png') no-repeat;
        background-size: cover;
}

<body>
    <div id="app"></div>
</body>

这种方法能用于铺满不指定高度的容器，但是不适用于背景上有文字的时候
这种方法是响应式填满a容器。

.a {
       width: 100%;
}
.b {
     /*使用padding-top实现响应式背景图片，高/宽*/
     /*不适用于背景上有文字的时候，文字会显示在底部*/
     padding-top: 60%; 
     background-image: url('./img/下载.jpg');
     background-size: cover;
 }
 
 <div class="a">
        <div class='b'></div>
 </div>

3. 固定背景图片的高度，让宽度自适应

.con {
    width: 100%;
    height: 300px;
    background: url("image/vpb_intro/introduce_9.png") center center no-repeat;
    background-size: cover;