父元素display:table-cell & vertical-align:middle
div{ display:table-cell; vertical-align:middle; text-align:center; width:100px; height:100px; } img{ width:80px; height:80px; }
子元素position:absolute & 盒子模型margin
div{ position: relative; width: 100px; height: 100px; } img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 80px; height: 80px; }
CSS3 transform属性
div{ position: relative; width: 100px; height: 100px; } img{ position: relative; /* 相对于父元素向右下移动50%,即50px */ left:50%; top:50%; /* 相对于自身像左上移动50%,即40px */ transform:translate(-50%,-50%); height: 80px; width: 80px; }