页面布局（各种居中定位等）

水平垂直居中
/* 居中元素Add CSS*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*居中元素根据内容给出宽度，也就是说可以居中包裹的子元素，但子元素宽度如果宽度超出550px将自动换行。*/

方式2：
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
margin: auto;

方式3：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
display:flex;
/* 居中Add CSS*/
margin:auto;
/* 居中元素根据内容给出宽度，也就是说可以居中包裹的子元素，但子元素宽度超过祖先元素宽度将自动换行。*/

水平居中
方式1：
/* 居中Add CSS*/
width: 600px;
height: 600px;
margin:0 auto;

方式2：
/* 父元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
left:50%;
/* 居中元素Add CSS*/
width: 600px;
height: 600px;
position:relative;
right:50%;

水平居中内联元素
父元素Add CSS
width: 600px;
text-align: center;
垂直居中内联元素
父元素Add CSS
height: 500px;
line-height: 500px;

定位的元素控制层叠顺序
position:abstract;
z-index:-1;

清除浮动的影响
1 父元素添加样式
overflow:hidden
2 父元素添加样式
overflow:auto
3 浮动元素后加空标签，并设置样式
clear:both
4 父元素设置宽高
5 父元素添加样式
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

让文字消失
父元素Add CSS
display: block;
text-indent: -999em;

图片处理
图片等比缩放
img{  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}

图片大于父元素居中
pa{text-aline:center;}
son{margin:0 -100%}
!important 增加样式权重 语法：
    样式名：值 !importan;

图片元素在相对于内联元素垂直居中
vertical-align: middle;