css定位怎么实现居中?

css定位怎么实现居中?

使用绝对定位absolute是一种常用、兼容性很好的方式。

.element {   
    width: 600px; height: 400px;   
    position: absolute; 
    left: 50%; 
    top: 50%;   
    margin-top: -200px;    /* 高度的一半 */  
    margin-left: -300px;    /* 宽度的一半 */  
}

这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

(推荐学习:CSS视频教程

CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin。 transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

.element {   
    width: 600px; height: 400px;   
    position: absolute; left: 50%; top: 50%;   
    transform: translate(-50%, -50%);  /* 50%为自身尺寸的一半 */  
}

于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。

问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心margin:auto.

margin:auto实现绝对定位元素的居中

.element {   
    width: 600px; height: 400px;   
    position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0;   
    margin: auto;    /* 有了这个就自动居中了 */  
}

代码两个关键点:

上下左右均0位置定位;

margin: auto

于是,就居中了。上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。

Image placeholder
前端答疑
未设置
  76人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css定位(position)属性怎么用?

position属性规定元素的定位类型。说明position属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css使用float怎么居中?

css使用float怎么居中?css并没有float:center,但是实现水平居中浮动是可以实现的。以下面的Li列表为例,我们要实现中间LI的居中浮动: 列表一 列表二 列表三 我们需要先了解下

css水平垂直居中有几种实现方式?

css水平垂直居中有几种实现方式?1、水平对齐+行高【思路一】text-align+line-height实现单行文本水平垂直居中 .f10.test{ text-align:center; line

css文字水平垂直居中怎么设置?

1、文字水平居中在CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和c

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

如何不写css使div居中显示

如何不写css使div居中显示不使用css使div居中显示,可以使用标签,对其所包括的文本进行水平居中。html代码如下: 这是div 效果:(相关课程推荐:css视频教程)标签说明HT

css3怎么实现菱形渐变?

css3怎么实现菱形渐变1、实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:.diamond{ width:200px; height:200px; clip-path:pol

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

css怎么设置粘性定位?

css怎么设置粘性定位?粘性定位的设置方法是给元素添加position:sticky;,sticky是css定位新增属性,类似static(没有定位)和固定定位fixed的结合。它主要用在对scrol

CSS粘性定位(position: sticky)是怎样工作的?

浏览器对CSS粘性定位有着非常好的支持,但很多开发者都没有用过它。究其原因有两个: ● 第一,受到浏览器的良好支持需要漫长的等待:浏览器的支持往往需要很长的时间才能完成,到时候它的功能已经被人们遗忘了

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

Fish Redux中的Dispatch是怎么实现的?

前言开源地址:https://github.com/alibaba/fish-redux我们在使用fish-redux构建应用的时候,界面代码(view)和事件的处理逻辑(reducer,effe

揭秘|每秒千万级的实时数据处理是怎么实现的?

01背景闲鱼目前实际生产部署环境越来越复杂,横向依赖各种服务盘宗错节,纵向依赖的运行环境也越来越复杂。当服务出现问题的时候,能否及时在海量的数据中定位到问题根因,成为考验闲鱼服务能力的一个严峻挑战。线

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

如果有人再问你怎么实现分布式延时消息,这篇文章丢给他

1.背景上篇文章介绍了RocketMQ整体架构和原理有兴趣的可以阅读一下,在这篇文章中的延时消息部分,我写道开源版的RocketMQ只提供了18个层级的消息队列延时,这个功能在开源版中显得特别鸡肋,但

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

jquery怎么判断值是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等Jquery方法可以使用Jquery提供的方法:使用$.inArray()来判断。inArray()函数用于在数组中查找指

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

jquery判断checkbox是否被选中?

jquery判断checkbox是否被选中?一、is()方法进行判断$("input[type='checkbox']").is(':checked')返回true或false二、attr()方法进行