【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法

技术【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法 【CSS】让图片在高宽固定的div里水平垂直都居中的三种办法效果:实现一:绝对定位加精算!DOCTYPE html
html
head

【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

(0)

相关推荐

  • oracle18c新特性有哪些

    技术oracle18c新特性有哪些oracle18c新特性有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Oracle宣布Database 18c已

    攻略 2021年11月12日
  • 狼原文及翻译,文言文《狼》中的词语翻译

    技术狼原文及翻译,文言文《狼》中的词语翻译狼 一屠晚归,担中肉尽,止有剩骨。途中两狼,缀行甚远。  屠惧,投以骨。一狼得骨止,一狼仍从。复投之,后狼止而前狼又至。骨已尽矣。而两狼之并驱如故  屠大窘,恐前后受其敌。

    生活 2021年10月26日
  • 知识也是有质量的

    技术知识也是有质量的 知识也是有质量的关键字
    知识搬运工、知识提炼者、知识结晶、知识孤岛、知识宫殿
    何为知识搬运工
    知识搬运工是指那些通过阅读将作者的知识搬运到自己脑子里的一群人,他们不求理解,只求记忆

    礼包 2021年10月26日
  • 无锡旅游景点大全,去无锡旅游哪些景点值得推荐

    技术无锡旅游景点大全,去无锡旅游哪些景点值得推荐无锡是个好地方,有水有山,可以说依山傍水,有很多著名的可供游人一赏。1、太湖,当你听到太湖美这首歌曲时,你就会感到太湖美,名副其实无锡旅游景点大全;2、三国水浒城,又是中央

    生活 2021年10月24日
  • MySQL面试题有哪些

    技术MySQL面试题有哪些本篇内容介绍了“MySQL面试题有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!非关系型数

    攻略 2021年12月3日
  • 如何进行HashMap扩容机制源码分析

    技术如何进行HashMap扩容机制源码分析这期内容当中小编将会给大家带来有关如何进行HashMap扩容机制源码分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。具体看源码之前,我们先简

    攻略 2021年12月8日