实现div里的img图片水平垂直居中_茜茜_前端开发者

body结构

body结构

<body>
  <div>
    <img src="1.jpg" alt="haha">
  </div>
</body>
<body>
  <div>
    <img src="1.jpg" alt="haha">
  </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>
<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>

<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>
<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>

<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>

 方法三:可以用在不清楚图片图片或元素的真实宽高情况下

方法三:可以用在不清楚图片图片或元素的真实宽高情况下

还是通过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>
<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>

<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>

方法四:

方法四:

<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>
<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>

<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>

方法五:弹性布局flex

方法五:弹性布局flex

<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>
<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>

<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>

 

» 本文来自:前端开发者 » 《实现div里的img图片水平垂直居中_茜茜_前端开发者》
» 本文链接地址:https://www.rokub.com/73435.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!