文档章节

只要三行css代码让任何元素居中

麦可儿
 麦可儿
发布于 2015/03/29 11:49
字数 225
阅读 11
收藏 0

With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.

The CSS property transform is usally used for rotating and scaling elements, but with its translateYfunction we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.

So, to do this we write:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);}

That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9!

To make it even more simple, we can write it as a mixin with its vendor prefixes:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);}.element p {
  @include vertical-align;}

Or you can use the Sass placeholder selector to reduce code bloat in the output CSS:

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);}.element p {
  @extend %vertical-align;}


本文转载自:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

共有 人打赏支持
麦可儿
粉丝 1
博文 24
码字总数 11603
作品 0
汕头
程序员
CSS实现垂直居中的常用方法

在前端开发过程中,盒子居中是常常用到的。 其中,居中又可以分为水平居中和垂直居中。 水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。 但是垂直居中相对来说是比较复杂一...

大猛猛
2016/03/07
61
1
CSS实现垂直居中的常用方法

作者:渔歌 网址:http://www.cnblogs.com/yugege/p/5246652.html 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素...

数通畅联
2016/04/15
72
0
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.5K
0
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
09/13
0
0
浅谈CSS中的居中

css居中在我们平常的页面布局中应用的十分频繁,掌握css各种居中方式也是很有必要的,所以对各种居中方式进行一个小小的总结。 居中主要分为垂直居中和水平居中,而不同元素之间的居中也有所...

Leisured
2016/08/24
19
0

没有更多内容

加载失败,请刷新页面

加载更多

负载均衡的解决方案有哪些

负载均衡器服务可满足大型组织的需求,支持所有数据中心和跨数据中心高可靠性场景。 本地负载均衡,通过附带或者未附带持久性覆盖选项,Incapsula支持各种负载均衡算法,以优化服务器之间的流...

上树的熊
11分钟前
0
0
Java实现在线打开word文档加盖印章/盖章/签名功能

前言: 我们知道,大型一点的OA办公系统都会有很多在线处理office办公文档的需求。其中有一点也基本绕不开,那就是为文档盖章或添加手写签名来保护文档,让被盖章的文档不再被编辑。 在Java中...

山里的红杏
18分钟前
3
0
js控制输入正负数,小数点后保留两位

//限制数字function clearNoNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.'){ obj.value=""; } obj.value ...

一直在成长的程序猿
21分钟前
1
0
动态代理

具体场景 为了使代理类与被代理类对第三方有相同的函数,代理类与被代理类一般实现一个公共的interface,定义如下 public interface Subject { void rent(); void hello(String s)...

wuyiyi
25分钟前
0
0
时间字段

我们看看这几个数据库中(mysql、oracle和sqlserver)如何表示时间 mysql数据库:它们分别是 date、datetime、time、timestamp和year。date :“yyyy-mm-dd”格式表示的日期值 time :“hh:...

DemonsI
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部