<style>
.box1,.box2{
??? width:500px;
??? height:500px;
??? ?/*非IE的主流浏览器识别的垂直居中的方法，无需其他即可*/
??? display: table-cell;
??? vertical-align:middle;
? ? /* 针对IE的Hack */
??? *display: block;
??? *font-size: 440px;/*约为高度的0.873，500*0.873 约为440，font-size实际上它设置的是字体中字符框的高度，根据box的告诉设置大约为高度的0.873就恰好在box里垂直居中*/
??? *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
?
? /*设置水平居中*/
??? ?text-align:center;
??? border: 1px solid #eee;
}
.img{
??? ?vertical-align:middle;
}
.text{
??? ??? width:20px;
??? ??? margin:0px auto;/* 块级元素的居中处理可以使用margin：0px auto，但是要注意需要保证外边的width和里面的块的width都确定，此外关于行级元素不起作用 */
}
.text2{
??? width:20px; /*关于行级元素，可以直接使用外面块级或者行级元素的text-align属性即可*/
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</header>
<body>
??? <div class="box1">
??? ??? <img class="img" src="./themes/qingdao/public/images/login/btns_login.png">
??? </div>
??? <div class="box2">
??? ??? <div class="text">
??? ??? 你好
??? ??? </div>
??? ??? <span class="text2">
??? ??? 你好吗
??? ??? </span>
??? </div>
</body>
</html>