1. 怎麼讓img在div里垂直居中
body結構
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body
方法一：
將display設置成table-cell，然後水平居中設置text-align為center，垂直居中設置vertical-align為middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
方法二：
通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心，要是圖片的中心位於div的中心，就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 寬度的一半 */
}
</style>
2. CSS中如何實現圖片垂直居中
在曾經的
淘寶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;}"
/>
3. div 怎麼讓圖片垂直居中
比如
<div style="margin:0 auto;text-align:center"><img src="196999_142815071333_2.jpg" /></div>
4. 如何讓div中的圖片垂直居中對齊
分兩種情況：
1、圖片寬高固定，這種情況很簡單。
水平居中：就在圖片的css中加 dispaly:block;margin:0 auto;
垂直居中：自己算出（div的高度-圖片的高度）/2，得到margin-top值即可。
2、圖片高度未知，這個布局比較難實現。一般我是用js做的。
水平居中：同上，在圖片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-圖片的高度）/2，得到margin-top值賦給它。
5. 如何將html中圖片文字垂直居中
文字垂直居中：
設置標簽高度height，並且設置行高line-height值與height值一樣。
也可以給父標簽設置相對定位（position：relative），然後文字用一個行內標簽（如span）包裹，並且給span設置絕對定位。
div垂直居中：
可以使用margin或padding來控制。比如margin：70% 0；（上下70%，左右0）
如果滿意，望採納，謝謝！如果不懂，可隨時追問！
6. 怎樣讓圖片在DIV中垂直居中
例子：<div
class="ac"
style="width:1000px;height:500px;position:relative;
z-index:9;">
<img
width="200px"
height="200px"
style="position:absolute;
top:150px;
left:400px;
z-index:9"
/>
</div>
這里的top和left需要數學天賦了，一般top=外div總高height/2+需要垂直居中內容總高height/2；left同理。
7. css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中
1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。
8. HTML問題:怎麼讓一個圖片在div中垂直居中
第一種情況：知道圖片的寬高和div的寬高；
<div style="width:300px;height:500px;">
<img src="1.jpg" style="float:left;width:200px;height:300px;margin:100px50px">
</div>
9. CSS如何實現讓圖片垂直居中
在一個容器里再定義一個絕對定位的p容器，再在p容器里放需要垂直居中的圖片，圖片定義相對定位的CSS。 直接上CSS代碼：#pic{width:300px; height:300px; background-color:green; border:6pxsolid#ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle;}#picp{*position:absolute;top:50%;left:50%;}#picpimg{*position:relative;top:-50%;left:-50%;}#pic是容器，裡面放一個p容器，該容器採用絕對定位，最後插入圖片，圖片採用相對定位。 這里用到了一個hack,*只有IE瀏覽器可以識別，Firefox不認識
10. CSS圖片垂直居中怎麼設置
摘要 我們經常使用「margin: 0 auto」來實現水平居中，而我們一直認為「margin: auto」是不能實現垂直居中，但是實際上，我們僅需要添加一些限制便能實現我們的效果，就是通過定位：