img在div中垂直居中的方法

html中

<div><img src="" />
</div>

方法：

1.将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>

2.通过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>

3.还是通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%);《最好用！！！！！！！！！！》

<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%;
transform: translate(-50%,-50%);
}
</style>

4.定位

<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: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>

5.弹性布局

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>

img在div中垂直居中的方法相关推荐

php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
css文字在div中,[html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法如果要垂直居中的只有一行或几个文字, ...
php h1怎么居中,html-如何在div中垂直居中放置H1？
html-如何在div中垂直居中放置H1? 首先,我道歉. 我知道这里针对此问题发布了各种解决方案,但是对于我一生来说,我无法让它们发挥任何作用. 对于响应式网站,我正在尝试将H1放在div中. 水平 ...
html中两个div垂直居中对齐,在div中垂直居中的两个元素
桃花长相依如何对元素进行垂直.水平或两者的居中这里有两种在div中对div进行中心化的方法.一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产.在这两种情况下,居中的div的高度都可以 ...
Div图片垂直居中的方法
<style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-a ...
div文字垂直居中的方法有哪些？
首先我们应该知道文字的水平居中比较简单,行级元素设置其父元素的text-aligncenter,块级元素设置其本身的left和rightmargins为auto即可.但是div文字的垂直居中就不是那么 ...
文字在div中垂直居中
2019独角兽企业重金招聘Python工程师标准>>> 这个方法只能将单行文本置中.只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. & ...
css中图片在div中的位置,纯CSS实现任意图片在div中垂直居中
在苦逼的前端领域,相信许多CSS新手都遇到过图片垂直居中的问题,今天我们就来分享一种实现图片垂直居中的CSS方法. 话不多说,先直接贴上代码: div{ border:1px solid #ccc; ...
二十：让行内元素在div中垂直居中
(1)使用display:table-cell配合vertical-align:center(淘宝也是这样用的) <div class="method4"><sp ...

img在div中垂直居中的方法

img在div中垂直居中的方法相关推荐

最新文章

热门文章