CSS实现子元素div水平垂直居中的示例

下面是CSS实现子元素div水平垂直居中的攻略,包含两个示例。

一、通过flex布局实现

  1. HTML代码
<div class="container">
  <div class="child"></div>
</div>
  1. CSS代码
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  border: 1px solid black;
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
}

上述代码中,.container类设置了display: flex,justify-content: center和align-items: center这三个属性。这使得.container元素内的子元素在水平和垂直方向上都居中对齐。另外,我们还定义了一个高度值用于展示居中效果。

二、通过百分比和transform属性实现

  1. HTML代码
<div class="container">
  <div class="child"></div>
</div>
  1. CSS代码
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: gray;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

上述代码中,.container类设为position: relative,是为了让其内部设定的子元素.child使用position: absolute属性时,相对于.container元素的位置进行定位。

.child元素的left属性设为50%,表示在水平方向上占据.container宽度的50%的位置。然后通过使用transform软件,把元素向左移动自身宽度一半的长度。同时,同样的方式设置.top,把元素向上移动自身高度一半的长度。这样一来,.child元素就实现了在水平和垂直方向上居中对齐。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现子元素div水平垂直居中的示例 - Python技术站

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

相关文章

  • 关于li:hover的怎么清除浮动问题实现代码

    下面是关于如何清除浮动问题实现代码的完整攻略。 怎么用li:hover实现清除浮动 首先需要明确,使用 li:hover 来清除浮动是一种非常简单有效的清除浮动方法,它的原理是在鼠标悬停在该元素上时,利用 :hover 选择器的特性来触发该元素上的样式,而这个样式包含清除浮动的代码。具体实现的步骤如下: 给需要清除浮动的元素添加 :hover 伪类选择器,并…

    css 2023年6月10日
    00
  • CSS实现单行、多行文本溢出显示省略号的实现方法

    下面我来详细讲解CSS实现单行、多行文本溢出显示省略号的实现方法。 一、单行文本溢出显示省略号的实现方法 实现单行文本溢出显示省略号的方法是通过增加CSS属性text-overflow来控制文本的溢出效果。 .single-line { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏文本溢出部分…

    css 2023年6月10日
    00
  • 移动端适配 使px自动转换rem

    移动端适配通常会遇到设备分辨率不同、屏幕尺寸不同等问题,为了解决这些问题,比较常见的方法是将所有的长度单位都使用相对单位rem,但是手动计算rem值比较繁琐,此时可以使用自动将px转换成rem的方法。以下是具体的实现步骤: 1. 添加viewport meta标签 在<head>标签中添加viewport meta标签,这个标签会告诉浏览器如何设…

    css 2023年6月10日
    00
  • jQuery选择器之表单元素选择器详解

    jQuery选择器之表单元素选择器详解 作为前端开发者,处理表单元素是不可避免的一个任务。而jQuery选择器为我们提供了一些非常便捷且强大的工具来处理表单元素,本篇文章将为您详细讲解jQuery选择器之表单元素选择器的使用方法和示例说明。 基本的表单元素选择器 jQuery提供了一些基本的表单元素选择器,用于选择表单元素,包括: :input:选择所有的&…

    css 2023年6月9日
    00
  • box-shadow和drop-shadow实现不规则投影实例代码

    首先我们来了解一下box-shadow和drop-shadow两种方式实现阴影的不同之处: box-shadow属性是在目标元素的边框外侧形成一个矩形的投影效果。 drop-shadow属性是在目标元素和背景之间产生一个投影效果,投影效果是会根据目标元素的不规则形状进行调整的。 接下来我们分别来看一下如何使用box-shadow和drop-shadow实现不…

    css 2023年6月9日
    00
  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery是一款广泛应用于前端开发的JavaScript库,其强大和便捷的API可以大大提高开发效率。在Web开发中,经常需要使用到弹出层和遮罩层,以提高用户体验。本文将结合示例,详细讲解如何使用jQuery操作DOM实现弹出页面遮罩层,以及在Web端和移动端中阻止遮罩层的滑动。 什么是遮罩层 遮罩层是一种运用在页面上的覆盖层,通常用于弹出框、模态框等场景…

    css 2023年6月10日
    00
  • CSS3 伪类选择器 nth-child()说明

    CSS3 的伪类选择器之一是nth-child(),其作用是筛选出一组兄弟元素中,特定位置的那一个。 语法说明 对某个元素所进行的选取规则为: :nth-child([<an+b>]) 解释如下: n表示从等差数列的第一个数开始,共有多少个数,从0开始计算。 an+b表示等差数列的公式,其中a和b为自然数,且满足条件0 ≤ b < a。 用…

    css 2023年6月9日
    00
  • DIV+CSS 浮动布局完美解决方案

    DIV+CSS浮动布局是网页设计中常用的一种布局方式,可以用CSS中的float属性来将元素浮动到其父元素的左侧或右侧,从而实现多栏布局。但是,浮动布局也存在一些问题,例如:元素高度无法自适应,容易出现浮动元素脱离文档流等问题。下面是一份完整的攻略,帮助您解决浮动布局的问题。 一、清除浮动的方法 在进行浮动布局时,经常会出现子元素的高度无法和父元素高度相等的…

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