SELECT [t0].[a_id], [t0].[a_site], [t0].[a_model], [t0].[a_type], [t0].[a_special], [t0].[a_name], [t0].[a_from], [t0].[a_from_url], [t0].[a_author], [t0].[a_editor], [t0].[a_describe], [t0].[a_content], [t0].[a_create_date], [t0].[a_tag], [t0].[a_hits], [t0].[a_commend], [t0].[a_istop], [t0].[a_isimg], [t0].[a_cacheimg], [t0].[a_imgurls], [t0].[a_imgurl], [t0].[a_ismedia], [t0].[a_mediaurl], [t0].[a_iscomment], [t0].[a_isRecycle], [t0].[a_weight], [t0].[a_weights], [t0].[a_status], [t0].[a_url], [t0].[a_file_path], [t0].[a_contentfile], [t0].[a_comment], [t0].[a_ispass], [t0].[a_bury], [t0].[a_dig], [t0].[a_score], [t0].[a_rank], [t0].[a_diguser], [t0].[a_buryuser], [t0].[a_viewip], [t0].[a_lastviewdate], [t0].[a_neworimageorvideo], [t0].[class_id], [t0].[class_type], [t0].[class_name], [t0].[class_show_name], [t0].[class_parent_id], [t0].[class_id_path], [t0].[class_name_path], [t0].[class_show_name_path], [t0].[class_depth], [t0].[class_order], [t0].[class_content], [t0].[class_img], [t0].[a_model_name] FROM [dbo].[mvc_content_view] AS [t0] WHERE ([t0].[a_id] = @p0) AND ([t0].[a_type] = @p1) -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- @p1: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1 SELECT TOP (1) [t0].[a_id], [t0].[a_site], [t0].[a_model], [t0].[a_type], [t0].[a_special], [t0].[a_name], [t0].[a_from], [t0].[a_from_url], [t0].[a_author], [t0].[a_editor], [t0].[a_describe], [t0].[a_content], [t0].[a_create_date], [t0].[a_tag], [t0].[a_hits], [t0].[a_commend], [t0].[a_istop], [t0].[a_isimg], [t0].[a_cacheimg], [t0].[a_imgurls], [t0].[a_imgurl], [t0].[a_ismedia], [t0].[a_mediaurl], [t0].[a_iscomment], [t0].[a_isRecycle], [t0].[a_weight], [t0].[a_weights], [t0].[a_status], [t0].[a_url], [t0].[a_file_path], [t0].[a_contentfile], [t0].[a_comment], [t0].[a_ispass], [t0].[a_bury], [t0].[a_dig], [t0].[a_score], [t0].[a_rank], [t0].[a_diguser], [t0].[a_buryuser], [t0].[a_viewip], [t0].[a_lastviewdate], [t0].[a_neworimageorvideo], [t0].[class_id], [t0].[class_type], [t0].[class_name], [t0].[class_show_name], [t0].[class_parent_id], [t0].[class_id_path], [t0].[class_name_path], [t0].[class_show_name_path], [t0].[class_depth], [t0].[class_order], [t0].[class_content], [t0].[class_img], [t0].[a_model_name] FROM [dbo].[mvc_content_view] AS [t0] WHERE ([t0].[a_type] = @p0) AND ([t0].[a_id] < @p1) ORDER BY [t0].[a_id] DESC -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- @p1: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1 SELECT TOP (1) [t0].[a_id], [t0].[a_site], [t0].[a_model], [t0].[a_type], [t0].[a_special], [t0].[a_name], [t0].[a_from], [t0].[a_from_url], [t0].[a_author], [t0].[a_editor], [t0].[a_describe], [t0].[a_content], [t0].[a_create_date], [t0].[a_tag], [t0].[a_hits], [t0].[a_commend], [t0].[a_istop], [t0].[a_isimg], [t0].[a_cacheimg], [t0].[a_imgurls], [t0].[a_imgurl], [t0].[a_ismedia], [t0].[a_mediaurl], [t0].[a_iscomment], [t0].[a_isRecycle], [t0].[a_weight], [t0].[a_weights], [t0].[a_status], [t0].[a_url], [t0].[a_file_path], [t0].[a_contentfile], [t0].[a_comment], [t0].[a_ispass], [t0].[a_bury], [t0].[a_dig], [t0].[a_score], [t0].[a_rank], [t0].[a_diguser], [t0].[a_buryuser], [t0].[a_viewip], [t0].[a_lastviewdate], [t0].[a_neworimageorvideo], [t0].[class_id], [t0].[class_type], [t0].[class_name], [t0].[class_show_name], [t0].[class_parent_id], [t0].[class_id_path], [t0].[class_name_path], [t0].[class_show_name_path], [t0].[class_depth], [t0].[class_order], [t0].[class_content], [t0].[class_img], [t0].[a_model_name] FROM [dbo].[mvc_content_view] AS [t0] WHERE ([t0].[a_type] = @p0) AND ([t0].[a_id] > @p1) ORDER BY [t0].[a_id] -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- @p1: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1 SELECT [t0].[a_id], [t0].[a_site], [t0].[a_model], [t0].[a_type], [t0].[a_special], [t0].[a_name], [t0].[a_from], [t0].[a_from_url], [t0].[a_author], [t0].[a_editor], [t0].[a_describe], [t0].[a_content], [t0].[a_create_date], [t0].[a_tag], [t0].[a_hits], [t0].[a_commend], [t0].[a_istop], [t0].[a_isimg], [t0].[a_cacheimg], [t0].[a_imgurls], [t0].[a_imgurl], [t0].[a_ismedia], [t0].[a_mediaurl], [t0].[a_iscomment], [t0].[a_isRecycle], [t0].[a_weight], [t0].[a_weights], [t0].[a_status], [t0].[a_url], [t0].[a_file_path], [t0].[a_contentfile], [t0].[a_comment], [t0].[a_ispass], [t0].[a_bury], [t0].[a_dig], [t0].[a_score], [t0].[a_rank], [t0].[a_diguser], [t0].[a_buryuser], [t0].[a_viewip], [t0].[a_lastviewdate], [t0].[a_neworimageorvideo] FROM [dbo].[mvc_content] AS [t0] WHERE ([t0].[a_id] = @p0) AND ([t0].[a_type] = @p1) -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- @p1: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1 UPDATE [dbo].[mvc_content] SET [a_hits] = @p19 WHERE ([a_id] = @p0) AND ([a_site] = @p1) AND ([a_model] = @p2) AND ([a_type] = @p3) AND ([a_special] = @p4) AND ([a_name] = @p5) AND ([a_from] = @p6) AND ([a_from_url] IS NULL) AND ([a_author] IS NULL) AND ([a_editor] IS NULL) AND ([a_describe] IS NULL) AND ([a_content] = @p7) AND ([a_create_date] = @p8) AND ([a_tag] = @p9) AND ([a_hits] = @p10) AND (NOT ([a_commend] = 1)) AND (NOT ([a_istop] = 1)) AND (NOT ([a_isimg] = 1)) AND ([a_cacheimg] IS NULL) AND ([a_imgurls] IS NULL) AND ([a_imgurl] = @p11) AND (NOT ([a_ismedia] = 1)) AND ([a_mediaurl] IS NULL) AND (NOT ([a_iscomment] = 1)) AND (NOT ([a_isRecycle] = 1)) AND ([a_weight] = @p12) AND ([a_status] = @p13) AND ([a_url] IS NULL) AND ([a_file_path] IS NULL) AND ([a_contentfile] IS NULL) AND ([a_comment] = @p14) AND ([a_ispass] = @p15) AND ([a_bury] = @p16) AND ([a_dig] = @p17) AND ([a_score] = @p18) AND ([a_diguser] IS NULL) AND ([a_buryuser] IS NULL) AND ([a_viewip] IS NULL) AND ([a_lastviewdate] IS NULL) AND ([a_neworimageorvideo] IS NULL) SELECT [t1].[a_weights], [t1].[a_rank] FROM [dbo].[mvc_content] AS [t1] WHERE ((@@ROWCOUNT) > 0) AND ([t1].[a_id] = @p20) -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- @p1: Input BigInt (Size = 0; Prec = 0; Scale = 0) [197] -- @p2: Input BigInt (Size = 0; Prec = 0; Scale = 0) [24] -- @p3: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- @p4: Input BigInt (Size = 0; Prec = 0; Scale = 0) [0] -- @p5: Input NVarChar (Size = 11; Prec = 0; Scale = 0) [图片垂直居中的使用技巧] -- @p6: Input NVarChar (Size = 4; Prec = 0; Scale = 0) [2514] -- @p7: Input NVarChar (Size = 1791; Prec = 0; Scale = 0) [{$ad$}

在曾经的 淘宝UED 招聘 中有这样一道题目：

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：

1. 垂直居中；
2. 图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

.box {
 /*非IE的主流浏览器识别的垂直居中的方法*/
 display: table-cell;
 vertical-align:middle;

 /*设置水平居中*/
 text-align:center;

 /* 针对IE的Hack */
 *display: block;
 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
 *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

 width:200px;
 height:200px;
 border: 1px solid #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

<div class="box">
 <img src="http://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
</div>

当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

《Vertical centering using CSS》
《Vertical centering using CSS》（标题和上同，内容不同）
《CSS List Grid Layout》

] -- @p8: Input DateTime (Size = 0; Prec = 0; Scale = 0) [2008-6-1 13:19:23] -- @p9: Input NVarChar (Size = 14; Prec = 0; Scale = 0) [图片,垂直,居中,使用,技巧] -- @p10: Input BigInt (Size = 0; Prec = 0; Scale = 0) [2184] -- @p11: Input NVarChar (Size = 0; Prec = 0; Scale = 0) [] -- @p12: Input BigInt (Size = 0; Prec = 0; Scale = 0) [0] -- @p13: Input Int (Size = 0; Prec = 0; Scale = 0) [0] -- @p14: Input BigInt (Size = 0; Prec = 0; Scale = 0) [0] -- @p15: Input Int (Size = 0; Prec = 0; Scale = 0) [0] -- @p16: Input BigInt (Size = 0; Prec = 0; Scale = 0) [0] -- @p17: Input BigInt (Size = 0; Prec = 0; Scale = 0) [0] -- @p18: Input Float (Size = 0; Prec = 0; Scale = 0) [0] -- @p19: Input BigInt (Size = 0; Prec = 0; Scale = 0) [2185] -- @p20: Input BigInt (Size = 0; Prec = 0; Scale = 0) [5478] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1 SELECT TOP (10) [t0].[a_id], [t0].[a_site], [t0].[a_model], [t0].[a_type], [t0].[a_special], [t0].[a_name], [t0].[a_from], [t0].[a_from_url], [t0].[a_author], [t0].[a_editor], [t0].[a_describe], [t0].[a_content], [t0].[a_create_date], [t0].[a_tag], [t0].[a_hits], [t0].[a_commend], [t0].[a_istop], [t0].[a_isimg], [t0].[a_cacheimg], [t0].[a_imgurls], [t0].[a_imgurl], [t0].[a_ismedia], [t0].[a_mediaurl], [t0].[a_iscomment], [t0].[a_isRecycle], [t0].[a_weight], [t0].[a_weights], [t0].[a_status], [t0].[a_url], [t0].[a_file_path], [t0].[a_contentfile], [t0].[a_comment], [t0].[a_ispass], [t0].[a_bury], [t0].[a_dig], [t0].[a_score], [t0].[a_rank], [t0].[a_diguser], [t0].[a_buryuser], [t0].[a_viewip], [t0].[a_lastviewdate], [t0].[a_neworimageorvideo], [t0].[class_id], [t0].[class_type], [t0].[class_name], [t0].[class_show_name], [t0].[class_parent_id], [t0].[class_id_path], [t0].[class_name_path], [t0].[class_show_name_path], [t0].[class_depth], [t0].[class_order], [t0].[class_content], [t0].[class_img], [t0].[a_model_name] FROM [dbo].[mvc_content_view] AS [t0] WHERE ([t0].[a_type] IN (@p0)) AND (NOT ([t0].[a_isRecycle] = 1)) ORDER BY [t0].[a_id] DESC -- @p0: Input BigInt (Size = 0; Prec = 0; Scale = 0) [236] -- Context: SqlProvider(Sql2008) Model: AttributedMetaModel Build: 3.5.30729.1