文档章节

CSS3 position 垂直水平居中定位

珞木橘子
 珞木橘子
发布于 2017/04/28 16:05
字数 92
阅读 7
收藏 0
.middle{
            position:absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

分析:

top:50%; left:50%;会使元素的左上角处于定位的中间,

transform:translate(-50%,-50%)是相对于容器本身的宽高分别向左,向上移动50%;这样一来,整个元素

就垂直水平居中了    

© 著作权归作者所有

共有 人打赏支持
珞木橘子
粉丝 2
博文 33
码字总数 12308
作品 0
广州
程序员
私信 提问
16种方法实现水平居中垂直居中

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

tomzhangto
2017/12/19
0
0
关于CSS制作水平/垂直居中对齐问题

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

ACE-705
2014/05/07
0
0
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
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中的水平/垂直居中问题

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

FT_Christ
2014/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
14
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
9
0
my.ini

1

architect刘源源
今天
10
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
10
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部