【CSS】让图片在高宽固定的差异里水平垂直都居中的三种办法
效果:
实现一:绝对定位加精算
!DOCTYPE html
超文本标记语言
头
meta charset='UTF-8 '
标题圆角Img示例/title
样式类型='text/css '。parentDiv{
宽度宽度:200像素
高度:400 px
背景-颜色:黄色;
位置:相对;
}。childImg{
位置:绝对;
高度:128 px
宽度宽度:128像素
left:36px/* (200-128)/2 *
top:136px/* (400-128)/2 */
}
/style
/head
身体
div class='parentDiv '
img类='childImg' src='bggj-08.png' /
/div
/body
/html
实现二:无须计算自动偏移比上面方法省事
!DOCTYPE html
超文本标记语言
头
meta charset='UTF-8 '
标题图片垂直水平居中/title
样式类型='text/css '。parentDiv{
宽度宽度:200像素
高度:400 px
背景-颜色:黄色;
位置:相对;
}。childImg{
高度:128 px
宽度宽度:128像素
位置:绝对;
左侧:50%;
前:50%;
transform:translate(-50%,-50%);
}
/style
/head
身体
div class='parentDiv '
img类='childImg' src='bggj-08.png' /
/div
/body
/html
方法三:柔性布局,但仅在铬中好用,Editplus3不支持,别的浏览器自己试。
!DOCTYPE html
超文本标记语言
头
meta charset='UTF-8 '
标题图片垂直水平居中/title
样式类型='text/css '。parentDiv{
宽度宽度:200像素
高度:400 px
背景-颜色:黄色;
display:flex
正义-内容:中心;
对齐-项目:居中;
}。childImg{
高度:128 px
宽度宽度:128像素
}
/style
/head
身体
div class='parentDiv '
img类='childImg' src='bggj-08.png' /
/div
/body
/html
结束
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/154003.html