html

<div id="box">
   ![](images/1.png)
</div>

css

#box{
    width: 700px;
    height: 500px;
    line-height:500px;
    font-size: 0;
    text-align: center;
    vertical-align: middle;
    border:1px solid red;
}
img{
    vertical-align: middle;
}

效果预览

实现未知图片宽高情况下在div中垂直居中
html css
金三银四前端面试汇总
CSS div不定宽高，如何实现宽高比例1:1 div不定宽高，实现垂直居中 div不知道宽高且display:n...
不定宽高的div盒子和不定宽高的盒子水平垂直居中
让一个不定宽高的div，垂直水平居中的几种实现方式不定宽高的div垂直居中的方式： 1、使用CSS方法：父盒子...
垂直居中：display:table的学习
实现div中的不定宽高图片垂直居中 1.这里不得不提这个布局神器 display：table-cell css代码...
未知高度垂直水平居中
未知宽高的弹出框，水平垂直居中 parrent 内的元素水平垂直居中 parrent 内的元素垂直居中
css实现水平垂直居中的方法
本文主要针对子元素已知宽高和未知宽高的情况下，对其进行水平垂直居中本文假设对如下元素进行水平垂直居中方式（父元...
纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
HTML CSS
纯CSS实现未知尺寸的图片在容器中水平和垂直居中
使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中 CSS HTML
居中布局
水平居中垂直居中垂直水平居中已知元素的宽高的居中布局定位居中布局盒模型居中布局图片的垂直水平居中(利用...
css中固定宽高div与不固定宽高div垂直居中的处理办法
固定宽高div垂直居中如上图，固定高宽的很简单，写法如下： position:absolute; left:50...