如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。
兼容性不错的主流用法是:
.element { width: 600px; height: 400px; position: aboslute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ }
但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin
负值的调整无法精确。此时,往往要借助JS获得。
CSS3的兴起,使得有了更好的解决方法,就是使用transform
代替margin
. transform
中translate
偏移的百分比值是相对于自身大小的,于是,我们可以:
.element {
width: 600px; height: 400px;
position: aboslute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。
然,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。
实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto
.
三、margin:auto实现绝对定位元素的居中
首先,我们来看下CSS代码:
.element {
width: 600px; height: 400px;
position: aboslute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
代码两个关键点:
- 上下左右均
0
位置定位; margin: auto
于是,就居中了。上面代码的width: 600px
height: 400px
仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~
对了,该方法IE8+以及其他浏览器都是OK的。
相关推荐
绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。 兼容性不错的主流用法是: CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position:...
绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可。示例: [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0...
1.css实现居中 缺点:需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: ...
div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的父元素...
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 用CSS让元素居中显示并不是件很简单的事情—...
但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下: 复制代码代码如下:<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>...
一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明: 复制代码代码如下: /* 代码实现: * 设定宽度和高度,父...
父元素加相对定位,子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; pos
水平居中相对于其它几中居中排列要简单的多,按标签元素可分为行内元素与块级元素居中: 1、行内元素 如:a img span em b small 此类标签元素及文本 .center { text-align: center; } 2、块级元素 如:div ...
而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等这些东西。 上图中:黑色为body,深绿色需要在body中水平居中,并且宽度是自适应的。亮绿色,是...
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 ... 绝对定位 使用Flexbox 设定行高(line-height) 设定行高是垂直居中最简单的方式,适用于“单行”的“行
行内元素的居中,使用text-align:center就可以实现,已知宽度的块元素的居中,使用绝对定位以及设置margin为宽的一半的负值就可以实现。但是不定宽度的居中比起上面两种更常用,也更复杂,我们常常需要在分页的页码...
假设,要垂直水平居中的元素大小是未知的,你要使用绝对定位与负margin配合就难上加难。当然你会说,使用表格将解决我一切所需,的确是这样,那么除了这些方法,还有别的方案吗?接下来我们就针对这个自设问题,来...
本人英语还没过四级,所以不能说是翻译把,只能说是按照自己的理解去叙述了一遍作者的意思,请各位多多指教。 译文内容: ...首先,我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离,然后我们需要设
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
方法1:table-cell html结构: 垂直居中 css: .box1{ display: table-cell; vertical-align: middle; text-align: center; } 方法2:display:flex ...方法3:绝对定位和负边距 .box3{position:
源码使用CSS属性+原生js代码实现图片轮播切换、图片整体跟随鼠标移动效果、图片整体鼠标滚轮控制缩放,使用的css属性包括:弹性盒布局元素居中、背景图片平铺尺寸设置、相对、绝对定位、滤镜效果、图片层级、边距...
网页制作Webjx文章简介:在CSS中...第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的