css垂直居中的几种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。下面我们就来介绍几种css实现垂直居中的方法。

方法一、对父容器使用display: table-cell+vertical-align: middle;使其内的子元素实现垂直居中;

原理:父元素设置为表格的单元格元素,而在表格单元格中的元素设置vertical-align: middle;会使其以中间对齐的方式显示;

1.jpg

方法二、父元素设置伪元素并设置伪元素display: inline-block;、vertical-align: middle;和height: 100%,然后设置子元素display: inline-block;、vertical-align: middle;;

原理:父元素设置伪元素,然后让其内的伪元素高为父元素的100%高度,再用vertical-align: middle;和display: inline-block;使子元素与伪元素并排,并且以中间对其的方式进行对其;

2.jpg

方法三、设置上下相同的padding(如果子元素是block或inline-block元素,还可对子元素设置上下margin相同来达成同样效果);

PS:常用于父元素无固定高度时;

原理:利用内边距将内容区域夹在中间;

3.jpg

方法四、利用给父元素设置相对定位,子元素设置绝对定位、margin: auto 0;和top: 0; bottom: 0;实现垂直居中;

原理:因为auto关键词默认自动分配剩余空间,宽度相对window是固定的,所以margin: 0 auto;可以有水平居中的效果,而高度相对window并不是固定的。

所以margin: auto 0;不能垂直居中,所以让子元素的上下margin值不相对于window进行计算,改为相对父元素进行计算即可让margin: auto 0;生效。

4.jpg

方法五、利用绝度定位和负margin实现子元素垂直居中;

原理:利用子元素绝对定位,相对父元素向下移动父元素高度的50%,然后再利用负margin向上移动自身高度的50%达到垂直居中效果;

5.jpg

更多相关知识请关注前端学习网站

以上就是css垂直居中的几种方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏