绝对定位display:absolute如何实现垂直居中？

首先设置一个父元素（.parent）和一个子元素（.child）的样式。

【这里的width和height的值是一样的】

CSS代码：

.parent {position: relative;width: 200px;height: 200px;background-color: #eee;
}
.child {width: 70px;height: 70px;position: absolute;background-color: red;
}

HTML代码：

<div class="parent"><div class="child"></div>
</div>

页面：

如果我们直接给子元素（.child）设置top:50%

页面：

JavaScript验证一下确实距离顶部的距离为100px

只要使得垂直居中线能从中间平分掉.child，就能让.child垂直居中于.parent。

此时，.child的顶部与.parent的垂直居中线重合，也就说只要让.child能够上移其本身width一半的就可以了。

上移距离 = width * 0.5= 70 * 0.5 = 35px

margin-top是正时，外边距向上扩张，子元素下移；margin-top是负时，外边距向下缩减，子元素上移。所以要设置成-35px。

.child {width: 70px;height: 70px;position: absolute;background-color: red;top: 50%;margin-top: -35px; /*新加样式*/
}

页面：

绝对定位display:absolute如何实现垂直居中？相关推荐

position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片.文字等行内元素(in ...
工作383:css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））...
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的. 正确的是:只要父级元素设了p ...
前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
在布局的过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件. 什么?使用绝对定位还要条件??? 当然要啦!代码又没有脑子,没法自己 ...
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...
Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项
文章目录一.前言二.标准流 2.1 排布规则三.Demo 四.拓展阅读一.前言在<Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解>一文中,讲 ...
CSS 元素的绝对定位 position: absolute 和 position: fixed
当一个元素的 position属性设置为 absolute 或 fixed,它将使用绝对定位.绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所占的空间会关闭,就好像该元素不存在一样,因此不会 ...
【CSS】CSS元素显示模式display + 网页单行文字垂直居中小技巧
写在前面,作者首页有前端专栏,详细分享相关知识,有兴趣的不妨点个收藏 ~~~~ CSS元素显示模式display 标签显示模式是标签以什么方式进行显示.HTML标签一般分为块标签和行内标签两种类型,它 ...
HTML中定位之绝对定位position:absolute;
position: absolute; 盒子发生绝对定位,将脱离原来文本,盖在其他盒子之上,进行定位操作时,将按照某一个父级进行定位,该父级具有以下特点: 1.position 属性是非static ...

绝对定位display:absolute如何实现垂直居中？

绝对定位display:absolute如何实现垂直居中？相关推荐

最新文章

热门文章