文档章节

对(利用'绝对定位/负边距' 对盒子进行居中)经典方法的原理解析

远方眺望
 远方眺望
发布于 2017/07/17 14:09
字数 288
阅读 22
收藏 0

相信大家对使用绝对定位+负外边距的的方法使盒子居中这一方法并不陌生,下面笔者解析下其原理吧~

首先我们看看这个经典居中定位的代码:

.box{
			height:100px;
			width:100px;
			position:absolute;
			top:50%;
			left:50%;
			margin-left:-50px;  /*宽度的一半*/
			margin-top:-50px;   /*高度的一半*/
		}

该方法使用的一个前提条件是必须要知道盒子的尺寸

在看下面的原理图前,我们首先要明白让盒子居中实际上为让其几何中心与父盒子的几何中心重合。

我们使用position:absolute top:50% left50%的目的在于使子盒子的左顶点与父盒子的几何中心重合,这是第一步;使用margin-top:-50px margin-left:-50px目的在于使子盒子中心与父盒子中心重合,这是第二步。

由此我们可以知道当知道任意子盒子尺寸时,都可以使用此方法让其偏移到父盒子中心

© 著作权归作者所有

远方眺望
粉丝 0
博文 11
码字总数 3724
作品 0
荆州
程序员
私信 提问
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
0
0
BAT前端面试-css问题集锦

display: none; 与 visibility: hidden; 的区别 相同: 它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从...

大灰狼的小绵羊哥哥
2018/11/28
0
0
关于CSS中的水平/垂直居中问题

关于css中的水平、垂直居中问题,我想大家也经常遇到过,而且这也是实用性比较高的用法,那么究竟有多少种方法呢?这边编者就做个小小的总结,有什么不足之处,还望大家多多指出。。。 一、横...

FT_Christ
2014/05/06
0
0
CSS常用垂直居中布局

在前端岗位面试中,面试官为了考察前端攻城狮的css布局能力,非常喜欢问的其中一个问题就是如何让元素垂直居中,这种布局方法相信每一位同学都有自己喜欢的一套方法,但是面试官要你回答得越...

会写代码的husky
2016/10/29
13
0

没有更多内容

加载失败,请刷新页面

加载更多

我为什么要写微信公众号

埋一颗种子,细心呵护,静待她枝繁叶茂,葱郁参天 V2论坛上有个帖子【做程序员最重要的还是一定要有自己的作品】,作者写道: 能有一个作品和你的名字联系在一起,应当成为在职业生涯前期着意...

运维咖啡吧
22分钟前
2
0
数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
6
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部