css-内容居中（水平及垂直）

 

1. 水平垂直居中

(1). inline
　　* 内容为文本、图片
　　* text-align:center; vertical-align:middle;
　　* display:table-cell; text-align:center; vetical-align:middle;
(2). block
　　2.1 水平垂直
　　　　* .content{ position: relative;}
　　　　　.wrap{ position:absoulute; left:50%; margin-left:-20px; width:40px; height:40px;}
　　　　* .content { position: relative;}
　　　　　.wrap { margin: auto; position: absolute; left:0; right:0; top:0 ; bottom:0;}
　　　　* .content{ display:table;}
　　　　　.wrap { display:table-cell; text-align:center; vetical-align:middle;}
　　　　* .content{ display:flex; justify-content:center; align-items:center;}
2.2 水平居中 .content>.wrap
　　　　* .wrap{ margin: 0 auto;}
　　　　* 浮动元素的水平居中
　　　　　　>> 确定浮动元素的宽
　　　　　　　　.content > .f-width > .wrap
　　　　　　　　.f-width{ position:relative; left: 50%;}
　　　　　　　　.wrap { position:relative; left: -50%;}

　　　　　　　　*****
　　　　　　　　.wrap 必须用position:relative;