欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

Css实现竖直居中的N种场景及N种方法

发布时间:2016-10-17  编辑:杨雨个人博客网站   点击:   

刚开始工作的时候,Css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~

后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为啥每次都觉得,诶上次那个解决方法好像不行呢?(原来并不是我智商的问题)好了废话不多说,记录下遇到的不同场景及解决方法,希望能对自己或者别人有所帮助。

inline 或者 inline-* 的元素竖直居中

可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景:

1. 单行竖直居中,如单行文本或者链接

这种情况,通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

如果老娘就不想使用 padding 不方便使用 padding 时,可以通过给元素设置 line-height,使其等于父容器的高度,从而实现竖直居中。注意,此时记得要考虑父容器的 padding 和 border 带来的高度变化。

2. 多行竖直居中,如多行文本

和单行文本一样,给元素上下添加相同大小的 padding 值,还是好用滴~

另外一种方法,是借助 table 的属性:将父容器设置成 table,需要竖直居中的元素设置为 table-cell,然后就可以使用 vertical-align 属性来居中了。

块级元素竖直居中

通常借助 绝对定位 和 translate 等手段,在已知或者未知块级元素高度时,分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法,并借助 margin 可以为负值的特性,实现绝对定位居中:

/* 已知元素高度为 100px (也可以是百分比,如 80%)*/
height: 100px;

/* 先使用绝对定位,将元素的上边界置于竖直的中间*/
position: absolute;  
top: 50%;

/* 再使用margin-top,将元素向上移动自身高度的一半*/
margin-top: -50px;  

笔者表示类似这段代码的使用频率简直不要太高~ 于是在使用 sCss 的前提下,自己封装了一个 mixin,专门用来实现这种定位方式。

// 定义绝对定位实现水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的时候直接引用就可以了,这样可以避免在改动元素宽或高时,还需要同时去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

2. 块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似,只不过在元素高度不确定的情况下,借助 translateY 使元素向上移动自身高度的一半,进而实现竖直居中。

/* 先将元素的上边界置于竖直的中间*/
position: relative;  
top: 50%;

/* 再使用 translateY,将元素向上移动自身高度的一半*/
transform: translateY(-50%);  

目前想到的就这些,应该足够覆盖大部分的使用情况了~ 以上这些实现方法,当然也可以是混合使用的,具体如何,就看应用场景啦。

本文地址:http://itbyc.com/web/11762.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1