一、问题提出

绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

相对定位的盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin: auto; 样式的方式令盒子水平居中 ;

举例说明 : 绝对定位的元素需要居中对齐的地方很多 , 如下图所示 , 右侧的固定定位按钮 , 需要在浏览器中居中对齐 , 轮播图中的五个小圆点的容器需要居中对齐 ;

二、绝对定位居中设置

1、设置固定尺寸

使绝对定位元素水平 / 垂直居中最简单的方法就是使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素水平 / 垂直居中 ;

2、先偏移50%再回退固定值

父容器盒子如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ;

先设置 50% 的宽度 / 高度偏移量 , 然后再往回退盒子一半宽度 / 高度的偏移量 ;

以水平居中为例 : 200 x 200 大小的盒子 , 通过设置

首先 , 设置 left 左边偏移为 50% , 让子元素的左侧移动到父容器水平中心位置 ;

 left: 50%;

然后 , 设置负数的左外边距 , 令子元素向左移动自身宽度的一半 , 需要提前测量子元素的宽度 ;

 margin-left: -100px;

三、绝对定位元素水平 / 垂直居中

为 80x80 像素尺寸的元素设置水平 / 垂直居中 ;

设置水平居中 : 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left: -40px 向左移动 40 像素 ;

     /* 绝对定位元素 - 水平居中 */.top {/* 子元素设置绝对定位 父元素需要设置相对定位 */position: absolute;/* 该盒子在父容器左上角 *//* 上边偏移 0 紧贴顶部 */top: 0;/* 左边偏移 50% 左侧紧贴水平居中位置 */left: 50%;/* 再向做移动 40 像素, 水平居中 */margin-left: -40px;/* 内容尺寸 */width: 80px;height: 80px;background-color: blue;}

设置垂直居中 : 先设置子元素顶部移动到父容器垂直中心位置 top: 50%; , 然后再向上移动 40 像素 ;

     /* 绝对定位元素 - 垂直居中 */.bottom {/* 子元素设置绝对定位 父元素需要设置相对定位 */position: absolute;/* 该盒子在父容器右下角 *//* 顶部移动到垂直中心位置 */top: 50%;/* 右边偏移 0 紧贴右侧 */right: 0;/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */margin-top: -40px;/* 内容尺寸 */width: 80px;height: 80px;background-color: red;}

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位示例</title><style>/* 最外层 父容器盒子 */.box {/* 子元素设置绝对定位 父元素需要设置相对定位 */position: relative;/* 内容尺寸 通过测量图片获得 */width: 300px;height: 200px;/* 边框 1 像素实线 */border: 1px solid #ccc;/* 上下设置 100 像素外边距 水平居中 */margin: 100px auto;/* 子元素与 */padding: 10px;background-color: pink;}/* 标准流元素 */.center {width: 300px;height: 200px;background-color: purple;}/* 绝对定位元素 - 水平居中 */.top {/* 子元素设置绝对定位 父元素需要设置相对定位 */position: absolute;/* 该盒子在父容器左上角 *//* 上边偏移 0 紧贴顶部 */top: 0;/* 左边偏移 50% 左侧紧贴水平居中位置 */left: 50%;/* 再向做移动 40 像素, 水平居中 */margin-left: -40px;/* 内容尺寸 */width: 80px;height: 80px;background-color: blue;}/* 绝对定位元素 - 垂直居中 */.bottom {/* 子元素设置绝对定位 父元素需要设置相对定位 */position: absolute;/* 该盒子在父容器右下角 *//* 顶部移动到垂直中心位置 */top: 50%;/* 右边偏移 0 紧贴右侧 */right: 0;/* 垂直方向上 , 再向上走 40 像素 使得垂直居中 */margin-top: -40px;/* 内容尺寸 */width: 80px;height: 80px;background-color: red;}</style>
</head>
<body><div class="box"><div class="top"></div><div class="center"></div><div class="bottom"></div></div>
</body>
</html>

执行效果 :

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )相关推荐

在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码配合在线预览,效果更佳以下例子中,涉及到的CSS属性值. .parent-frame ...
div块内的CSS中心文本（水平和垂直）
我将div设置为display:block ( height和width 90px ),并且里面有一些文本. 我需要文本在垂直和水平方向上居中对齐. 我尝试了text-align:center ,但是 ...
css水平垂直居几种方式总结
1.水平对齐+行高 [方式1]text-align + line-height实现单行文本水平垂直居中 <style>.f1 .test {text-align: center;line- ...
【CSS】水平垂直布局
[CSS]水平垂直布局文章目录 [CSS]水平垂直布局一.水平布局 (1)行内元素 (2)块级元素给要居中的块级元素设置 margin: 0 auto; 要居中的块级元素:left + marg ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
[Web前端] 子元素设置高度为100%, 却没有与父元素对齐高度.
大概描述一下我遇到的情况. 父元素没有明确指定高度, 但是其中一个子元素的高度是确定的, 并且通过这个高度将父元素的高度撑起来. 另一个子元素的高度是100%, 即, 我想要使它与父元素的高度统一. ...
XamarinAndroid组件教程设置自定义子元素动画(二)
XamarinAndroid组件教程设置自定义子元素动画(二) (9)打开MainActivity.cs文件,为RecylerView的子元素设置添加和删除时的透明动画效果.代码如下: --using ...
css直接子元素怎么用,CSS 子元素选择器使用实例
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素. 子元素选择器使用大于号">"做为连接符. 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子 ...
在vue页面监听中如何修改子元素的样式
项目原先代码: 需要实现的是导航栏在页面下滑到一定位置的时候,对其样式进行修改父组件system.vue页面 <template> <div><div id=" ...

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

文章目录

一、问题提出

二、绝对定位居中设置

1、设置固定尺寸

2、先偏移50%再回退固定值

三、绝对定位元素水平 / 垂直居中

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )相关推荐

最新文章

热门文章

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

文章目录

一、问题提出

二、绝对定位 居中设置

1、设置固定尺寸

2、先偏移50%再回退固定值

三、绝对定位元素 水平 / 垂直 居中

【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )相关推荐

最新文章

热门文章

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

二、绝对定位居中设置

三、绝对定位元素水平 / 垂直居中

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )相关推荐