【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