css实现的让图片垂直居中的方法

当想要将图片垂直居中显示时,我们可以用CSS中的一些技巧来实现。下面是一些常见的方法:

方法 1:使用 Flex 布局

使用 display: flex 的父容器来垂直居中一个子元素。此方法可以在许多应用场景中使用。

HTML

<div class="parent">
  <img src="https://via.placeholder.com/150" alt="placeholder image">
</div>

CSS

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

在这个示例中,.parent 是一个包含了一个图片的容器。使用 display: flex 将此容器转换成为一个 Flex 的容器。接着通过 align-itemsjustify-content 两个属性将图片垂直和水平居中。

方法 2:使用 position 和负 margin

通过将图片的 position 设为 absolute 并使用 margin 将其垂直居中。

HTML

<div class="parent">
  <img src="https://via.placeholder.com/150" alt="placeholder image">
</div>

CSS

.parent {
  height: 200px;
  position: relative;
  border: 1px solid black;
}

.parent img {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

在这个示例中,.parent 是一个包含了一个图片的容器。使用 position: relative 将其 position 设为 relative,以便被其子元素图片参考。

同时也为了让图片的位置置于父元素的中心,给图片设置了 margin-top 和 margin-left 的值为图片自身宽高的一半(这里的图片宽高是已知的)。

以上是两种实现图片垂直居中的方法。具体应用时可以根据情况选择不同方案。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css实现的让图片垂直居中的方法 - Python技术站

(0)
上一篇 2023年6月13日
下一篇 2023年6月13日

相关文章

  • 详解html中background-image属性的设置

    关于HTML中background-image属性的设置,主要分为以下三个步骤: 1.准备背景图片 首先,在设置背景图片前,需要准备好需要设置的图片。可以使用自己的图片,也可以下载网络上的背景图片。需要注意的是,背景图片的格式应该是常见的图片格式之一(如jpg、png、gif等),大小要合适。 2.在样式表中设置background-image属性 接下来,…

    css 2023年6月9日
    00
  • javascript经典特效分享 手风琴、轮播图、图片滑动

    JavaScript经典特效分享 在前端开发中,JavaScript不仅可以用于数据交互、页面交互等,还可以用来实现各种各样的特效,比如手风琴、轮播图、图片滑动等。本文将一一介绍这三种常见的JavaScript特效的实现方法。 手风琴效果 手风琴效果就是指页面上有多个盒子,当用户单击某个盒子时,该盒子会变大,同时其他盒子变小。这种效果常用于呈现一些重要或突出…

    css 2023年6月10日
    00
  • Bootstrap 实现表格样式、表单布局的实例代码

    下面是关于“Bootstrap 实现表格样式、表单布局的实例代码”的攻略: Bootstrap 表格样式 Bootstrap 提供了多种表格样式,使用 table 类即可。如下是一个漂亮的、具有不同表格样式的 HTML 表格: <table class="table table-bordered table-hover table-strip…

    css 2023年6月10日
    00
  • CSS 图像透明度opacity兼容性介绍

    CSS 图像透明度opacity兼容性介绍 什么是CSS图像透明度opacity? opacity是CSS中控制元素透明度的属性,它的取值范围是0-1之间的数字。opacity为1时,元素是完全不透明的,为0时,元素是完全透明的,也就是看不见的。通过opacity属性,我们可以控制元素的不透明度程度。 兼容性问题 opacity是CSS3中的属性,并不是所有…

    css 2023年6月9日
    00
  • flex4.5中CSS选择器的应用小结

    关于“flex4.5中CSS选择器的应用小结”这个主题,下面是我的详细讲解攻略: 一、选择器的基本概念 CSS选择器是一种用来选择页面中某些元素的表达式。选择器可以根据元素的标签名、类名、ID等属性进行选择,更改元素的样式。 常见的CSS选择器有以下几种: 标签选择器:通过元素标签名来选择元素。 类选择器:通过元素的class属性值来选择元素。 ID选择器:…

    css 2023年6月9日
    00
  • js控制滚动条缓慢滚动到顶部实现代码

    实现网页滚动条缓慢滚动到顶部的效果,可以采用JavaScript来控制网页的滚动行为。以下是实现这个效果的完整攻略: 步骤一:创建HTML和CSS 首先,在HTML中创建一个按钮,用于触发滚动条滑动到顶部的事件: <button onclick="scrollToTop()">Back to Top</button&gt…

    css 2023年6月10日
    00
  • HTML blockquote 标签使用与美化

    接下来我将详细讲解一下 HTML blockquote 标签使用与美化的完整攻略。 什么是HTML blockquote标签? HTML blockquote 标签用于表示长的引用。这个标签可以用于表示一长段的引用,比如一篇文章的一部分,它可以自动添加缩进并改变文字颜色,使得该段引用内容在页面中更加醒目。 如何使用HTML blockquote标签 在 HT…

    css 2023年6月9日
    00
  • javascript代码优化的8点总结

    让我们开始。 JavaScript代码优化的8点总结 1. 减少全局变量 全局变量的声明会增加作用域链的长度,导致代码执行速度变慢。为了减少全局变量的数量,可以将变量封装在函数闭包中,只在需要时访问。 示例: (function() { var myVariable = ‘hello’; function myFunction() { var myInner…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部