元素水平垂直居中的几种方法
一、使用flex布局实现
1.设置父盒子为弹性布局
Title - 锐客网 html,body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
文章图片
以上实现图片在屏幕上水平垂直居中。
注意:1.在屏幕上实现水平垂直居中,所以父盒子为body,必须设置父盒子的宽度,才能垂直居中,否则只能水平居中(父盒子宽度是子元素撑起来的高度)
2.必须设置html的高度也是100%,否则不起作用,不能垂直居中。
3.针对父盒子设置以上三项。其他水平垂直居中类似。
二、绝对定位法
CSS3的兴起,使得有了更好的解决方法,就是使用
transform
代替margin
. transform
中translate
偏移的百分比值是相对于自身大小的,于是,我们可以:.element {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 50%为自身尺寸的一半 */
}
注意:position和tranform是两个独立属性,不要混为一谈 【元素水平垂直居中的几种方法】三、margin:auto实现绝对定位元素的居中
.element {
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* 有了这个就自动居中了 */
}
代码两个关键点:
- 上下左右均
0
位置定位; margin: auto
于是,就居中了。上面代码的
width: 600px
height: 400px
仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~解释:
转自:http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
可能有人会问,为何
margin: auto;
会让绝对定位元素居中了呢?哈哈,原因是………………当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了,例如:
.box { position: absolute; left: 0; right: 0; }
如果只有
left
属性或者只有right
属性,则由于包裹性此时.box
宽度是0
。但是,在本例中,因为left/right
同时存在,因此宽度就不是0
,而是自适应于.box
包含块的padding box
宽度,也就是随着包含块padding box
的宽度变化,.box
的宽度也会跟着一起变。具有流体特性绝对定位元素的
margin:auto
的填充规则和普通流体元素一模一样:- 如果一侧定值,一侧
auto
,auto
为剩余空间大小; - 如果两侧均是
auto
, 则平分剩余空间;
例如,下面的CSS代码:
.father { width: 300px; height:150px; position: relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
此时
.son
这个元素的尺寸表现为“格式化宽度和格式化高度”,和
的“正常流宽度”一样,同属于外部尺寸,也就是尺寸自动填充父级元素的可用尺寸的,然后,此时我们给.son
设置尺寸,例如:.son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; }
此时宽高被限制,原本应该填充的空间就被多余了出来,这多余的空间就是
margin:auto
计算的空间,因此,如果这时候,我们再设置一个margin:auto
,那么:.son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; margin: auto; }
我们这个
.son
元素就水平和垂直方向同时居中了。因为,auto
正好把上下左右剩余空间全部等分了,自然就居中啦!推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 教师要努力提高自己的专业水平——魏书生《教学工作漫谈》读后反思015
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- 建立垂直阅读才是最重要的
- 垂直农场101-室内农业入门知识
- 从某医院副院长拒不戴口罩被保安视频曝光事件看当前物业管理水平
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 做好这五个关键词,你的写作水平将突飞猛进
- 第六课|第六课 js管理页面元素位置大小