父级：relative
子级：absolute绝对定位，并设置left、top，设置margin来减去居中元素的1/2宽和1/2高。
效果图：
源码如下，粘贴到本地即可运行看到效果：左侧的图片和暂无数据文字居中。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> DEMO：内容上下左右居中 </title> 5 <meta name="keywords" content="/* 6 1.How To Use? 7 使用absolute通常是：父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位 8 2.What's the different? 9 absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框. 10 relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 11 */"/> 12 </head> 13 <style type="text/css"> 14 .content-box{ 15 1094px;height: 372px; 16 } 17 .border-left { 18 float: left; 19 /*父级需使用relative*/ 20 position: relative; 21 background-color: #f8f8f8; 22 height: 100%; 23 794px; 24 } 25 26 .left-box { 27 /*关键点：子级使用绝对定位，并设置left、top*/ 28 position: absolute; 29 left: 50%; 30 top: 50%; 31 /*用margin减去居中元素的1/2宽和1/2高*/ 32 margin-top: -83px; 33 margin-left: -63px; 34 } 35 36 .left-box div { 37 124px; 38 height: 40px; 39 line-height: 40px; 40 text-align: center; 41 } 42 43 .border-right { 44 300px; 45 float: right; 46 height: 100%; 47 background: #feced7; 48 text-align: center; 49 50 } 51 </style> 52 53 <body> 54 <div class="content-box"> 55 <div class="border-left"> 56 <div class="left-box"> 57 <img src="nodata_icon.png"> 58 <div>暂无数据</div> 59 </div> 60 </div> 61 <div class="border-right"> 62 <div>the right border</div> 63 </div> 64 </div> 65 </body> 66 67 </html>