在HTML&CSS中，如何最科學地將文字顯示在圖片正中間？
上面這張圖是一個APP的界面。我正在學習HTML和CSS。我想請問，如何在HTML中實現上面這樣圖片的排版。【我不是伸手黨】：
我百度了一下，嘗試了兩種方法，但是感覺不太好，問題在於百度給我的答案對於各個瀏覽器並不普遍適用，也有的方法是div層太多，我覺得語義化不太好。
【為什麼不去segmentdefault或者stack overflow問這樣的問題】：因為知乎的大神多，而且瀏覽量大，我覺得在這裡會更迅速的找到答案。【我希望得到的解答是】很有經驗的前端工程師會選擇用什麼樣的方法實現這樣的效果？
==========在此謝過了！
搜索關鍵詞：Centering in the Unknown。
看完 CSS Tricks 上這篇文章你應該對居中了如指掌了。
在不需要兼容低版本瀏覽器的時候我喜歡用 margin + transform 解決。
CSS製作圖片水平垂直居中
CSS實現垂直居中的5種方法
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/我想了一會兒，覺得還是跟你的需求本身有很大關係。
如果你的這個需要的圖片大小固定的話就很簡單，直接做div的background, size選cover，position：center。div本身就應該是固定大小的了，多行文字框起來，來個table-cell居中啊，或者line-height都行。
但是如果所有文字圖片大小都不固定呢...我個人覺得寫太多CSS trick和標籤嵌套都不如直接上js來得划算...
而且真正用起來的話估計是基本上依賴伺服器端的數據的。像這種高度敏感的控制項，能夠直接寫的時候get到整個外部容器的高度是比較好的，這樣可以在頁面剛渲染時就能把屏幕高度撐到正確的大小。如果不能的話那就寫唄~
於是閑的蛋疼寫了個小demo...有些地方比較倉促不規範就當玩兒了。兼容到IE8是沒什麼問題的，由於是載入圖片的時候拿到的寬高所以就算不支持table-cell也可以算出高度來手動定位~算是優雅降級吧=。=演示地址: http://wungcq.github.io/static/templates/TEST.html（那個醜陋的臨時寫的小模板就忍著看吧~現在是沒有外部庫依賴的。。）&
&
&
&
&
&
text-align: center;
font-family: "Microsoft YaHei", "Microsoft Yahei", "微軟雅黑", "", "Courier New", "Helvetica Neue", Courier, monospace;
background-color: #f1f1f1;
}
.pic-wrapper{
display: block;
position: relative;
margin: 15px auto;
width: auto;
height: auto;
background-size: contain;
transition: all ease .3s;
}
.pic-wrapper img{
display: block;
position: absolute;
z-index: 10;
top:0;
left: 0;
}
.pic-wrapper .words-wrapper {
display: table-cell;
position: relative;
margin: 0;
text-align: center;
vertical-align: middle;
z-index: 50;
background-color: rgba(0,0,0, .3);
transition: all ease-out .6s .1s;
}
.pic-wrapper .words-wrapper:hover {
background-color: rgba(0,0,0, .7);
}
.pic-wrapper .words-wrapper:hover .words {
opacity: 1;
}
.pic-wrapper .words-wrapper:hover .sub-title {
transform: translateY(5px);
}
.pic-wrapper .words-wrapper:hover .title {
transform: translateY(-5px);
}
.pic-wrapper .words-wrapper .words{
width:auto;
height: auto;
display: block;
margin: auto;
text-align: center;
vertical-align: middle;
transition: all ease .5s;
opacity: .5;
cursor: pointer;
}
.pic-wrapper .words-wrapper .title,
.pic-wrapper .words-wrapper .sub-title{
display: block;
color: #fff;
margin: 0;
font-weight: normal;
transition: all ease .5s .05s;
}
.pic-wrapper .words-wrapper .sub-title{
font-size: 24px;
margin-top: 10px;
}
.pic-wrapper .words-wrapper .title{
font-size: 30px;
}
&
&
&
&
&--&>
&&--&>
&&--&>
&--&>
&--&>
&
var arg ={
items:
[
{ "pid":42,
"image":"../42.jpg",
"width":960,
"height":600,
"words":{
"title":"here is the title",
"subTitle":"here is the sub title"
}
},
{ "pid":1,
"image":"../2.jpg",
"words":{
"title":"here is the title",
"subTitle":"here is the sub title"
}
},
{ "pid":2,
"image":"../2.jpg",
"words":{
"title":"here is the title",
"subTitle":"here is the sub title"
}
}
]
};
(function m(parentWrapper){
template = [
"&",
"&
"&",
"&
","10","&",
"&
","13","&",
"&",
"&",
"&"
];
"&",
"&",
"&"
];
var arr = arg.items||[];
var len = arr.length;
var t = function(img,i,arr,width,height){
temp[1] = "wrapper_"+arr[i]["pid"];
temp[3] = "width:" + width+"px;height:"+height+"px;";
temp[6] = "width:" + width+"px;height:"+height+"px;";
temp[10] = arr[i].words.title;
temp[13] = arr[i].words.subTitle;
var html = temp.join("");
nodes[i].outerHTML = html;
document.getElementById("wrapper_"+arr[i]["pid"]).appendChild(img);
//這裡可以添加向IE7兼容的定位計算
};
if(len&>0){
var temp = template.concat();
var m = function(i){
var img_my = new Image();
var _i = i;
var item = arr[_i];
img_my.onload = function(){
if(1){
var width = item["width"]||img_my.width;
var height = item["height"]||img_my.height;
t(img_my,_i,arr,width,height);
img_my.width = width;
img_my.height = height;
}
};
img_my.src = arr[i].image;
};
var node= document.createElement("div");
node.className = "pic-wrapper";
for(var i = 0; i&< len;i++) {
var nodeCopy = node.cloneNode(true);
parentWrapper.appendChild(nodeCopy);
var nodes = document.getElementsByClassName("pic-wrapper");
m(i);
}
}
})(document.body);
&
&
&
&
以前沒有完美的解決方案，所以才有了現在的彈性盒模型（display:flex;）lz研究一下這個，不過目前一些移動端和非現代瀏覽器還不能完全支持，但大勢所趨，應該很快就會普及了。
補充一下：以前用js是有解決方案的，但是問題本身是htmlcss推薦閱讀：
※div 疑惑？
※div標籤究竟該嵌套幾層？
※為何大部分叫法是「DIV+CSS」，而又有不少教材名稱是「CSS+DIV」？究竟哪個標準？