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”是不能实现垂直居中，但是实际上，我们仅需要添加一些限制便能实现我们的效果，就是通过定位：