文档章节

绝对定位元素水平垂直居中的两种常见方法

骑猪逛街666
 骑猪逛街666
发布于 2017/08/24 14:32
字数 390
阅读 2
收藏 0

阅读原文请点击

摘要: 一、负外边距 方法:绝对定位元素的尺寸已知,top设置为50%,left设置为50%,外边距margin取负数,大小是宽度width和高度height的一半,有内边距padding时要加上padding值再取半。

一、负外边距

方法:绝对定位元素的尺寸已知,top设置为50%,left设置为50%,外边距margin取负数,大小是宽度width和高度height的一半,有内边距padding时要加上padding值再取半。具体代码如下:

html代码:

<div class="box">
    <div class="box1"></div>
</div>

css代码:

.box{
    position: relative;
    width: 200px;
    height: 200px;
    background: yellow;
}

.box1{
    position: absolute;
    top: 50%;
    left:50%;   
    background: red;
    width: 100px;
    height: 100px;
    padding: 10px;
    margin-top: -60px;
    margin-left: -60px;
}

浏览器显示如下:

screenshot

除了这种常用方法外,在网上还看到了另一种比较简便的方法,整理如下:

二、利用margin: auto实现居中

方法:设置绝对定位元素top和bottom的值相等,left和right的值相等。但是left和right的值不能超过其相对元素width减去它自身width的一半,否则绝对定位会优先选取left值进行定位。top和bottom无此限制。最好配合overflow:auto防止溢出。具体代码如下:

css代码:

.box1{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: red;
    overflow: auto;//当内部内容较多时,会自动出现滚动条
}

浏览器显示同上。

阅读原文请点击

本文转载自:http://click.aliyun.com/m/29160/  

骑猪逛街666
粉丝 0
博文 14
码字总数 1479
作品 0
湾仔区
私信 提问
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
19
0
css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中(只能实现文本的水平居中) //html<div class="center"> 文本水平居中</div>//css.center{width: 200px;height: 100px;background-color: #a036b4; text......

lironghua
2014/05/07
0
0
集中コレクション,CSS垂直居中最强合集,看看你喜欢哪种?

我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题,但一直以来最麻...

前端大佬
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vmstat命令详解

https://www.cnblogs.com/ggjucheng/archive/2012/01/05/2312625.html

流光韶逝
18分钟前
0
0
如何理解算法时间复杂度的表示

先从O(1) 来说,理论上哈希表就是O(1)。因为哈希表是通过哈希函数来映射的,所以拿到一个关键 字,用哈希函数转换一下,就可以直接从表中取出对应的值。和现存数据有多少毫无关系,故而每次执...

yky20190625
34分钟前
2
0
分布式架构 实现分布式锁的常见方式

一、我们为什么需要分布式锁? 在单机时代,虽然不需要分布式锁,但也面临过类似的问题,只不过在单机的情况下,如果有多个线程要同时访问某个共享资源的时候,我们可以采用线程间加锁的机制...

太猪-YJ
今天
7
0
GitLab Docker 安装记录

安装环境 环境Centos7.4 64 1.拉取镜像文件 docker pull gitlab/gitlab-ce:latest 2.docker 安装 git.zddts.com 为访问域名或换成可以访问的IP docker run -d --hostname git.***.com -p ......

侠者圣
今天
0
0
EfficientNet: 再论 CNN 的网络规模

由于这里公式无法正常显示,所有内容以图片内容上传,如有需要,可提供 pdf 版。

爱吃草莓的皮卡丘
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部