dispaly属性，position属性

position:absolute;绝对定位相对于父元素（父元素设为relative）

position:relative;相对定位相对于自己

position:fixed;固定定位相对于浏览器

display:inline;行内元素，不换行,text-align:center不起作用

display:block;块级元素，换行，能设置宽高

display:inline-block;能设置宽高,不换行,text-align:center起作用

自适应居中

<div class="title">    <span class="message">等待钣金</span>    <span class="num">12</span></div>

.content .title span{position: relative;top:12px;height:15px;line-height: 15px;}.content .title span:last-child{display:inline-block;font-size: 14px;color:white;border-radius: 15px; background-color:#c19b74;width:27px;}

上下左右自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        #test{            position: relative;            width:100px;            height:100px;            background: green;        }        img{            position: absolute;            margin-top: auto;            margin-bottom : auto;            top: 0;            bottom: 0;            height:100%;        }    </style></head><body><div id="test"><img>    </div></body></html>

只是对img有用