简言
CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。
css居中
1 水平居中
1.1 内联元素水平居中
利用 text-align: center
可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline
), 内联块(inline-block
), 内联表(inline-table
), inline-flex
元素水平居中都有效。
核心代码:
.center-text { text-align: center; }
演示程序:
1.2 块级元素水平居中
通过把固定宽度块级元素的margin-left
和margin-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
相关推荐
WEB前端CSS居中的几种方法共4页.pdf.zip
最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔...
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
最近上网上找了些关于CSS实现垂直居中的方法,方法挺多,下面就我看到的几种好方法在这里说明一下,使用 CSS 实现垂直居中并不容易。
今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路: 一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
下面小编就为大家带来一篇css中常用的几种居中方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
图片垂直居中的css+div代码的几种方法编写
4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例 第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 ...
...
...
1. 要设置max-width/max-height属性来弥补内容块padding,否则可能 2. 手机浏览器和IE8-IE10浏览器不支持resize属性,所
下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img...
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要...
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 用CSS让元素居中显示并不是件很简单的事情—...
很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一不足之处就是结构繁锁,那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。 图片水平垂直居中存在的问题 所谓的...
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
这种方式兼容性不好 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9以下不支持transform属性 3、table + table-cell .father { ...
用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: ...