关于未知大小的图片的垂直居中问题
<div class="main">
<img src="3.jpg" alt=""/>
</div>
<style>
.main
{
width:500px;
height:600px;
border:1px solid black;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
搞定！
2：背景法：
<style>
.main
{
width:500px;
height:600px;
border:1px solid black;
display:table-cell;
vertical-align:middle;
text-align:center;
background:url('3.jpg') center no-repeat;
}
</style>
</head>
<body>
<div class="main">
<!--<img src="3.jpg" alt=""/>-->
</div>
</body>
此处再说说文字垂直居中并自动换行的设置，上代码：
<style>
.main
{
width:500px;
height:300px;
border:1px solid black;
display:table-cell;
vertical-align:middle;
text-align:center;
word-wrap:break-word;//文字自动换行
//white-space:nowrap;//此句表示绝不换行，即使父容器已经固定宽度，它也会将父容器撑大，在一行内显示
}
</style>
</head>
<body>
<div class="main">
h哈哈哈哈哈哈哈哈交换机上考场斤斤计较哈哈哈哈哈哈哈哈哈很纠结建军节建军节建军节建军节建军节建军节建军节建军节加速度肠胃科
</div>
</body>
