CSS实现div不设高度完全居中

CSS实现div不设高度完全居中的完整攻略主要包括以下几个步骤:

  1. 设置父元素为相对定位
.parent {
  position: relative;
}
  1. 设置子元素为绝对定位
.child {
  position: absolute;
}
  1. 设置子元素的top, left, right, bottom属性为0,并使用margin:auto属性来实现水平和垂直居中
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

下面是两个示例说明:

示例1

HTML代码:

<div class="parent">
  <div class="child">居中的内容</div>
</div>

CSS代码:

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 50px;
  background-color: #eee;
  text-align: center;
  line-height: 50px;
}

效果图:

CSS实现div不设高度完全居中

示例2

HTML代码:

<div class="parent">
  <div class="child">
    <img src="https://i.imgur.com/6v1YoLo.jpg" alt="美食">
    <span>美食图片</span>
  </div>
</div>

CSS代码:

.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
.child img {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.child span {
  margin-top: 10px;
  display: inline-block;
  font-size: 24px;
  color: #333;
}

效果图:

CSS实现div不设高度完全居中

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现div不设高度完全居中 - Python技术站

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

相关文章

  • 清理CSS样式的几个有用工具

    清理CSS样式是Web开发过程中非常重要的一步,可以有效地减少代码冗余,提高网页加载速度和性能。以下将介绍几个常用的CSS样式清理工具,帮助我们快速、简单地清理CSS样式。 1. CSS Purge CSS Purge是一款小巧、简单的CSS样式清理工具,用来删除未使用的CSS。实现原理是通过解析HTML文件,在运行时分析CSS文件中的选择器和样式规则,然后…

    css 2023年6月9日
    00
  • 关于CSS absolute与relative不得不说的话

    下面是关于CSS absolute与relative的完整攻略: 什么是CSS absolute与relative? CSS绝对定位和相对定位是一种基于元素父级(或祖先级)的定位方式,他们都是将元素从其正常的文档流中拖出来并定位在其所在元素(必须是已定位元素)的特定位置上。 其中,CSS相对定位是针对元素在正常文档流中的位置进行定位,而CSS绝对定位是基于页…

    css 2023年6月10日
    00
  • CSS样式表高效使用技巧充分利用样式表的强大性

    CSS样式表是Web开发中非常重要的一部分,可以控制网站的外观和布局。以下是一些CSS样式表高效使用技巧,可以充分利用样式表的强大性: 1. 使用类选择器和ID选择器 类选择器和ID选择器是CSS样式表中最常用的选择器。使用类选择器和ID选择器可以减少CSS代码的重复,并提高代码的可读性。以下是一个简单的示例: <div class="con…

    css 2023年5月18日
    00
  • html+css3太阳系行星运转动画效果的实现代码

    接下来我将为你介绍如何实现 HTML 和 CSS3 制作太阳系行星运转动画效果,并提供两条示例说明。 HTML + CSS3 制作太阳系行星运转动画效果——完整攻略 第一步:HTML 结构 我们首先来创建 HTML 结构,包含太阳、行星和轨道等元素。 <div class="sun"></div> <div …

    css 2023年6月9日
    00
  • 如何解决flex文本溢出问题小结

    如何解决flex文本溢出问题小结 在Web开发的工作中,我们常常会遇到一些flex布局中文本溢出的问题。这种问题往往发生在元素的宽度、高度被限制在一个固定大小的容器中时。在这种情况下,文本容易超出这个容器的宽度,导致布局崩溃。在本文中,我将总结一些解决文本溢出问题的方法,帮助大家更好地应对文本布局的挑战。 使用text-overflow属性 在CSS样式中,…

    css 2023年6月9日
    00
  • DIV+CSS布局也需要注意的SEO原则

    DIV+CSS布局是网站前端开发中常用的技术,它能够让网页排版更加灵活、兼容性更好,并且对SEO友好。但是,布局方式并不是惟一的影响SEO的因素,我们还需要在DIV+CSS布局过程中注意以下SEO原则。 1. 布局结构应符合语义化原则 语义化HTML结构对SEO十分重要。语义化结构使页面文本更有意义,有助于搜索引擎更好地理解页面内容,提高页面在搜索结果中的排…

    css 2023年6月10日
    00
  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    下面就为大家详细讲解微信小程序中的滚动选择器(时间日期)的相关知识及实例代码,包括使用步骤、代码实现以及注意事项等内容。 一、滚动选择器介绍 滚动选择器在小程序中可以用来让用户从一组可选项中进行选择。它提供了一种非常方便的选择方式,不仅适用于时间日期的选择,而且也适用于其他类型的选择。 在小程序中,时间日期选择器是通过 picker 组件实现的。picker…

    css 2023年6月9日
    00
  • javascript实现了照片拖拽点击置顶的照片墙代码

    下面详细讲解如何使用 JavaScript 实现照片拖拽点击置顶的照片墙代码。 步骤一:HTML模板和CSS样式的编写 首先,我们需要在 HTML 中创建照片的容器和一个置顶按钮,并为它们添加 CSS 样式。以下是示例代码: <div id="photos-container"> <div class="pho…

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