CSS中垂直居中的简单实现方法

大步's blog 发布时间：2015-07-06 18:18:34 作者：佚名

这篇文章主要介绍了CSS中垂直居中的简单实现方法,包括用CSS3中用transform来实现的例子,需要的朋友可以参考下

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
通过CSS3的transform来实现

CSS Code复制内容到剪贴板

.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}

Tag：垂直居中 css

相关文章

css实现元素水平垂直居中常见的两种方式实例详解
这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来
2017-04-23
CSS水平垂直居中的几种方法总结
这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
2016-12-19
css让容器水平垂直居中的7种方式
这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-17
利用CSS3的flexbox实现水平垂直居中与三列等高布局
这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考
2016-09-12
CSS设置文字图片垂直居中的方法总结
这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐，文中给出了实例代码，有需要的朋友们可以参考借鉴。下面来一起看看吧。
2016-09-12
CSS定位“十字架”之水平垂直居中
这篇文章主要介绍了CSS定位“十字架”之水平垂直居中的相关资料，CSS如何定位“十字架”实现水平垂直居中效果，小编为大家解答，感兴趣的小伙伴们可以参考一下
2016-03-02
CSS实现同一行的图片和文字垂直居中对齐的方法
这篇文章主要为大家介绍了CSS实现同一行的图片和文字垂直居中对齐的方法,涉及css中vertical-align:middle属性的使用技巧,需要的朋友可以参考下
2015-05-12
CSS垂直居中实现方法大全
本文给大家带来的是5种使用CSS实现垂直居中的方法，虽然各有优缺点，但还都是蛮实用的，小伙伴们根据自己的项目情况，自由选择吧。
2015-01-09
CSS实现垂直居中的4种思路详解
这篇文章给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-06

最新评论