您现在的位置是：网站首页> 编程资料编程资料

CSS垂直居中实现方法大全css实现元素水平垂直居中常见的两种方式实例详解CSS水平垂直居中的几种方法总结css让容器水平垂直居中的7种方式利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS设置文字图片垂直居中的方法总结CSS定位“十字架”之水平垂直居中CSS中垂直居中的简单实现方法CSS实现同一行的图片和文字垂直居中对齐的方法CSS实现垂直居中的4种思路详解

2023-10-24 339人已围观

简介本文给大家带来的是5种使用CSS实现垂直居中的方法，虽然各有优缺点，但还都是蛮实用的，小伙伴们根据自己的项目情况，自由选择吧。

摘要：
　　在我们制作页面的时候经常会遇到内容垂直居中的需求，今天分享5种垂直居中的方法，每种方法都有自己的优缺点，可以选择自己喜欢的方式。以下代码都经过本人亲自测试。

line-height：

复制代码

代码如下:

vertical-align:middle;

:before：

复制代码

代码如下:

　　　　　　vertical-align:middle;

padding-top：

复制代码

代码如下:

vertical-align:middle;

position:absolute：

复制代码

代码如下:

vertical-align:middle;

display:table-cell;

复制代码

代码如下:

vertical-align:middle;

小结：
　　以上代码本人是在chrome下做的测试，可能有些在ie下会有问题，使用时请注意。