前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS布局之垂直居中一

CSS布局之垂直居中一

作者头像
企鹅号小编
发布2018-01-26 10:55:49
6850
发布2018-01-26 10:55:49
举报
文章被收录于专栏:编程

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。

对于块级元素,设置它的margin:auto即可

但是,对于设置垂直居中来说,操作就没那么简单了。

不同情况要不同应对。一般我们可以有三种思路的解决方案。

今天我们先来讨论利用绝对定位解决垂直居中的思路。

如上,在能已知元素宽高的情况下,利用绝对定位将左上角定位到父级元素正中心,注意父级元素应设置“定位”,不然按照绝对定位的性质,元素会依次找寻其他已“定位”的祖先元素定位(实在没有其他定位的祖先元素会定位到视窗的正中心)。然后在通过设置margin-top与margin-left为负值,移动元素到正中心。

当然,我们可以利用CSS3中的clac()方法减少两行代码,效果是一样的。

以上方法是基于元素的宽高都固定。但在大部分情况中,元素的宽高都是随着父元素的变化而变化。对于不固定宽高的情况,我们又该如何处理呢?

解决办法是利用CSS3的transform属性的translate方法,以本元素自身为基准进行计算和移动 。

本期我给大家介绍了基于绝对定位方式实现垂直居中效果。下期我们讨论另外两种方法。

本文来自企鹅号 - 极乐coder饭媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 极乐coder饭媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档