来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

这15种CSS居中的方式,你都用过哪几种?

时间: 2019-09-02阅读: 158标签: 居中

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

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。

水平居中

有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错,::after 和 ::before 也可以实现居中。

1.1内联元素水平居中

1、flex

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。【前端精选40G资料包赠送co,每日新闻资讯ding,每天进步一点点bb,小写英文为微信】此方法对内联元素, 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

大家的第一反应,可能就是 flex 了。因为它的写法够简单直观,兼容性也没什么问题。是手机端居中方式的首选。

.center-text {

div  phorizontal and vertical/p/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc;}.flex-center { display: flex; justify-content: center; align-items: center;}

text-align: center;

利用到了 2 个关键属性:justify-content和align-items,都设置为center,即可实现居中。

}

需要注意的是,一定要把这里的flex-center挂在父级元素,才能使得其中唯一的子元素居中。

1.2块级元素水平居中

2、flex + margin

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

这是 flex 方法的变种。父级元素设置 flex,子元素设置margin: auto;。可以理解为子元素被四周的 margin “挤” 到了中间。

.center-block {

div  phorizontal and vertical/p/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: flex;}.wrapper  p { margin: auto;}

margin: 0 auto;

3、transform + absolute

}

这个组合,常用于图片的居中显示。

1.3多块级元素水平居中

div  img src="test.png"/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative;}.wrapper  img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

1.3.1 利用inline-block

当然,也可以将父元素 wrapper 的相对定位,移入子元素 img 中,替换掉绝对定位。效果是一样的。

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

4、table-cell

.container {

利用 table 的单元格居中效果展示。与 flex 一样,需要写在父级元素上。

text-align: center;

div  phorizontal and vertical/p/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: table-cell; text-align: center; vertical-align: middle;}

}

5、absolute + 四个方向的值相等

.inline-block {

使用绝对定位布局,设置margin:auto;,并设置 top、left、right、bottom 的值相等即可(不一定要都是 0)。

display: inline-block;

div  phorizontal and vertical/p/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative;}.wrapper  p { width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

}

这种方法一般用于弹出层,需要设置弹出层的宽高。

1.3.2 利用display: flex

6、writing-mode

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

这个方法可以改变文字的显示方向,比如让文字的显示变为垂直方向。

.flex-center {

div  div  phorizontal and vertical/p /div/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; writing-mode: vertical-lr; text-align: center;}.wrapper  .wrapper-inner { writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;}.wrapper  .wrapper-inner  p { display: inline-block; margin: auto; text-align: left;}

display: flex;

兼容性上还有些小瑕疵,但大部分浏览器,包括手机端已支持 writing-mode 的写法了。

justify-content: center;

7、grid

}

像表格一样,网格布局让我们能够按行或列来对齐元素。 然而在布局上,网格比表格更可能做到或更简单。

垂直居中

div  phorizontal and vertical/p/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: grid;}.wrapper  p { align-self: center; justify-self: center;}

2.1 单行内联元素垂直居中

但它在兼容性上不如 flex,特别是 IE 浏览器,只支持 IE10 及以上。

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

8、::after

#v-box {

伪元素也能用来实现居中么?感觉还是挺神奇的,看下面这个例子:

height: 120px;

div  img src="test.png"/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center;}.wrapper::after { content: ''; display: inline-block; vertical-align: middle; height: 100%;}.wrapper  img { vertical-align: middle;}

line-height: 120px;

水平方向很好理解。垂直方向,可以理解为 ::after 把 img 往下拉到了中间。

}

9、::before

2.2 多行元素垂直居中

另一种是配合font-size: 0;共同施展的魔法。

2.2.1 利用表布局

div  img src="test.png"/div

.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; font-size: 0;}.wrapper::before { display: inline-block; vertical-align: middle; font-size: 14px; content: ''; height: 100%;}.wrapper  img { vertical-align: middle; font-size: 14px;}

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

font-size: 0;的神秘之处在于,可以消除标签之间的间隙。另外,因为伪元素搭配的,都是最基础的 CSS 写法,所以不存在兼容性的风险。

.center-table {

总结

display: table;

今天共介绍了 9 种居中的方法。像 flex、absolute、grid,这些常用的方法往往可以在工作中,帮我们解决布局的问题。而像 writing-mode、::after、::before,这些神奇的特性仿佛帮我们掀开了 CSS 魔法大陆的一角,让人神往,忍不住想去探索更多。

}

.v-cell {

display: table-cell;

vertical-align: middle;

}

2.2.2 利用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;

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:这15种CSS居中的方式,你都用过哪几种?

关键词: