CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景,很难说用哪一种方式去实现居中。 所以就让我们做一个决策树,希望能使这个问题简单一点吧~

水平居中

行内或者具有行内元素性质的元素(比如文字或者链接)?

让一个父元素为块级元素的行内元素水平居中,可以: CSS:

123

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

单个块级元素?

你可以设置块级元素的 margin-leftmargin-rightauto 来使它水平居中(这个块级元素是被设置了一个 width 属性了,否则它会占满宽度,这时候已经不需要居中了),有一种速记的写法: CSS:

123

.center-me {margin: 0 auto;}

多个块级元素?

如果有两个或者更多的块级元素需要在被一行里水平居中,那么你最好设置他们不同的display 属性来达到效果了。这里有两个例子:一个是设置为 inline-block, 一个是设置为 flexbox 。 HTML:

<main class="inline-block-center"><div>I'm an element that is block-like with my siblings and we're centered in a row.</div><div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.</div><div>I'm an element that is block-like with my siblings and we're centered in a row.</div></main><main class="flex-center"><div>I'm an element that is block-like with my siblings and we're centered in a row.</div><div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.</div><div>I'm an element that is block-like with my siblings and we're centered in a row.</div></main>

CSS:

1234567891011

.inline-block-center {text-align: center;}.inline-block-center div {display: inline-block;text-align: left;}.flex-center {display: flex;justify-content: center;}

除非你是想让多个块级元素堆积在彼此的顶部(一列堆积啦),那么 margin: auto 还是依然适用的: CSS:

1234567

main div {background: black;margin: 0 auto;color: white;padding: 15px;margin: 5px auto;}

垂直居中

在CSS里,垂直居中是有那么一点点麻烦了。

行内或者具有行内元素性质的元素(比如文字或者链接)?

单行?

有时候行内元素或者文字显示为垂直居中,仅仅是因为它们的上下内边距相等: CSS:

1234

.link {padding-top: 30px;padding-bottom: 30px;}

如果 padding 出于某些原因不能用,并且你要使一些不换行的文字居中,这里有一个技巧,就是设置文字的 line-heightheight 的值相等。 CSS:

12345

.center-text-trick {height: 100px;line-height: 100px;white-space: nowrap;}

多行?

上边距和下边距相等也能让多行文字达到垂直居中的效果,但是如果这种方法不奏效的话,可能需要设置文字所在的元素为一个 table cell,不管它直接是 table 还是你用CSS使这个元素表现的像一个 table cellvertical-align 属性可以处理这种情况,它与我们通常所做的在行上处理元素对齐的方式不同: CSS:

1234567891011121314151617181920212223242526272829303132333435363738

table {background: white;width: 240px;border-collapse: separate;margin: 20px;height: 250px;}table td {background: black;color: white;padding: 20px;border: 10px solid white;/* default is vertical-align: middle; */}.center-table {display: table;height: 250px;background: white;width: 240px;margin: 20px;}.center-table p {display: table-cell;margin: 0;background: black;color: white;padding: 20px;border: 10px solid white;vertical-align: middle;}.flex-center-vertically {display: flex;justify-content: center;flex-direction: column;height: 400px;}

如果没法用类table方式,可能你需要用 flexbox ?单个的 flex 子元素可以非常简单的被一个 flex 父元素垂直居中: CSS:

123456

.flex-center-vertically {display: flex;justify-content: center;flex-direction: column;height: 400px;}

请记住这个方法仅仅适用于父容器具有一个固定的额高度(px,%,等等),这也是为什么容器有一个高度。

如果上面的方法都不能用,你可以试试 ”虚元素“ 技术:其中一个完整高度的伪元素放置在容器内,并与文本垂直对齐。 CSS:

1234567891011121314

.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;}

块级元素?

知道元素的高度?

不知道元素的高度是比较常见的,有很多原因:如果宽度改变,文本回流会改变高度;文字样式改变会改变高度;文字数量改变会改变高度;一个固定比例的元素,比如图片,当重置尺寸的时候也会改变高度,等等。

但如果你知道高度,你可以这样垂直居中元素: CSS:

123456789

.parent {position: relative;}.child {position: absolute;top: 50%;height: 100px;margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}

元素高度未知?

可以通过 transform 来达到目的: CSS:

123456789

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

能用 flexbox 吗?

毫无疑问,用 flexbox 简单太多了: CSS:

12345

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

垂直水平居中

你可以通过不同的方式结合上面的技术来得到一个完美的居中水平垂直居中元素。但是我发现,这些方法通常都属于以下三种阵营:

元素有固定的宽和高?

用负的 margin 值使其等于宽度和高度的一半,当你设置了它的绝对位置为 50% 之后,就会得到一个很棒的跨浏览器支持的居中: CSS;

123456789101112131415

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

元素的宽和高未知?

如果你不知道元素的高度和宽度,你可以用 transform 属性,用 translate 设置 -50%(它以元素当前的宽和高为基础)来居中: CSS:

123456789

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

能用 flexbox 吗?

为了让元素在 flexbox 两个方向都居中,你需要两个居中属性: CSS:

12345

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

结论

你完全可以用CSS来居中元素

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2016-12-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

931
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3283
来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

1383
来自专栏菜鸟计划

CSS布局(六) 对齐方式

一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

3715
来自专栏河湾欢儿的专栏

手机浏览器的八个容易忽略的兼容问题

3273
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件

设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),...

1083
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3726
来自专栏每日一篇技术文章

weex-20-scroller组件

scroll-direction 值为horizontal 水平滚动,值为vertical 垂直滚动

2152
来自专栏Android干货

小程序实践(六):view内部组件排版

     ①、当水平排列的时候  , justify-content:center ; 决定水平居中

1142
来自专栏james大数据架构

Android中Button

1.android:drawableTop="@drawable/accept"设置在按钮文本的上面绘制指定图片。可同时指定drawableLeft等其它方向 ...

2238

扫码关注云+社区

领取腾讯云代金券