MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 【基础】这15种CSS居间的方式,你都用过哪几种

【基础】这15种CSS居间的方式,你都用过哪几种

www.MyException.Cn  网友分享于:2018-04-04  浏览:1次
【基础】这15种CSS居中的方式,你都用过哪几种?

简言

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。

css居中css居中

1 水平居中

1.1 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

核心代码:

.center-text {
    text-align: center;
 }

演示程序:

演示代码

1.2 块级元素水平居中

通过把固定宽度块级元素的margin-leftmargin-right设成auto,就可以使块级元素水平居中。

核心代码:

.center-block {
  margin: 0 auto;
}

演示程序:

演示代码

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

演示程序:

演示代码

1.3.2 利用display: flex

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。

核心代码:

.flex-center {
    display: flex;
    justify-content: center;
}

演示程序:

演示代码

2 垂直居中

2.1 单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。

核心代码

#v-box {
    height: 120px;
    line-height: 120px;
}

演示程序:

演示代码

2.2 多行元素垂直居中

2.2.1 利用表布局(table

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

演示程序:

演示代码

2.2.2 利用flex布局(flex

利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。

核心代码:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

演示程序:

演示代码

2.2.3 利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

核心代码:

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

演示程序:

演示代码

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。

核心代码:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

演示程序:

演示代码

2.3.2 未知高度的块级元素

当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

演示程序:

演示代码

3 水平垂直居中

3.1 固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半,使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

演示程序:

演示代码

3.2 未知宽高元素水平垂直居中

利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

演示程序:

演示代码

3.3 利用flex布局

利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

核心代码:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

演示程序:

演示代码

3.4 利用grid布局

利用grid实现水平垂直居中,兼容性较差,不推荐。

核心代码:

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

演示程序:

演示代码

3.5 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。

核心代码:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

演示程序:

演示代码

4 说明

文中所述文字及代码部分汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

文中所述方案只是居中方案其中的一部分,并不是全部。另代码中涉及CSS3的flex,transform,grid等内容都存在兼容性问题。

5 引用参考

Centering in CSS: A Complete Guide

w3.org centering things

How To Center Anything With CSS

如何使DIV在屏幕上水平垂直居中显示?

文章评论

聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
代码女神横空出世
代码女神横空出世
编程语言是女人
编程语言是女人
我的丈夫是个程序员
我的丈夫是个程序员
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
那些争议最大的编程观点
那些争议最大的编程观点
中美印日四国程序员比较
中美印日四国程序员比较
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
一个程序员的时间管理
一个程序员的时间管理
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
每天工作4小时的程序员
每天工作4小时的程序员
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
漫画:程序员的工作
漫画:程序员的工作
程序员的鄙视链
程序员的鄙视链
为什么程序员都是夜猫子
为什么程序员都是夜猫子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
如何成为一名黑客
如何成为一名黑客
旅行,写作,编程
旅行,写作,编程
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员必看的十大电影
程序员必看的十大电影
程序员都该阅读的书
程序员都该阅读的书
Java程序员必看电影
Java程序员必看电影
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
10个调试和排错的小建议
10个调试和排错的小建议
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
鲜为人知的编程真相
鲜为人知的编程真相
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有