文档章节

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

麦可儿
 麦可儿
发布于 2015/03/29 11:49
字数 225
阅读 15
收藏 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
73
1
CSS实现垂直居中的常用方法

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

数通畅联
2016/04/15
79
0
开发效率创新高,只因收下了这波 CSS 操作

首先不管你承不承认干前端这一行除了没 bug 还需要界面美观度达到一定的值。否则是不可能让你通过的,这篇文章不是讲如何用 css 做酷炫的效果,比如实现个三角形、多边形、土星的。这里写的都...

MrXu_
09/01
0
0
如何让div中的内容垂直居中

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

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

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

颜海镜
2018/09/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
33分钟前
3
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
36分钟前
3
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部