CSS 中各种居中你真的玩明白了么

面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中

前言

页面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，有的特定场景下可能还有一些稀奇古怪的bug，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中

场景分类

根据应用场景，我们把居中的需求分为与盒子相关的居中和内容相关的居中，盒子相关的居中比较好理解，也是我们比较常见的应用场景，内容相关实际也很常用，只是平时注意得比较少，但如果对概念理解不清晰，实现出来的效果可能经常会偏差那么一丢丢，然后就开始穷举法解决问题了，这里也是我们本次讨论的重点

盒子相关

盒子模型相关的居中基本上可以根据盒子有没有给定宽高度分为分为两大类

我们先预设一下页面结构设置样式

<div class="parent">
  <div class="children"></div>
</div>

给定宽高

给定宽高的场景比较简单，能获取到元素的宽高那么直接计算子元素需要的偏移量就可以了，或者借助表格元table-cell现居中，但是大部分时候我们遇到的场景是不确定，并且不确定的解决方案可以向下兼容给定宽高的，这里就不过多赘叙了，直接看下一种情况

宽高不固定

宽高不固定时，主流的解决方案有两种，一种是使用弹性布局，另一种是使用定位

flex 弹性布局

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

相对定位

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

绝对定位

.parent {
  position: relative;
}

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

基本现在浏览器对弹性布局的支持已经很好了，也是主流的居中解决方案，放心用即可

内容相关

提到内容，最常想到的就是文字，图片，icon这些，这些元素的对齐大部分时候都是根据基准线来实现的baseline，可以使用设置行高line-height（这种方案有瑕疵，后面会详细介绍），文字居中属性text-align来实现，当然也可以转换成弹性布局来实现居中，都是可以的

这里我们举一个稍微特殊点的案例来进行分析，看应该如何进行居中

结构

<div class="parent">
    <span class="children1">HelloWorld</span>
    <span class="children2">世界你好</span>
</div>

样式

.parent {
  width: 100%;
  height: 100px;
  background-color: aquamarine;
}
.children1 {
  font-size: 42px;
  background-color: red;
}
.children2 {
  font-size: 18px;
  background-color: yellow;
}

方案

使用弹性布局

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

简单省心，达到效果

使用 line-height

.parent {
  line-height: 100px;
  text-align: center;
}

这个时候就会发现，水平方向使用text-align来居中没有问题，但是垂直方向出来的效果就和预想的有偏差了，我们先来分析为什么会这样

关于line-height

line-height 等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种不是真正的居中就越发的明显

line-height，指的是两行文字基线之间的距离（这说法实际有点争议，也可以字面理解就行的高度），如果 line-height 刚好等于盒子的高度，那么意味着基线就在盒子一半的位置，这样就实现了内容的垂直居中

我们在用line-height实现文字垂直居中的时候，有个前提，一个是单行元素，另外没有多种内联元素（不同大小的图片，文字，icon等等），不然你会在对齐内联元素的时候遇到很多麻烦

那么如何解决这个问题呢，首先要了解，行内元素在垂直方向的定位，是基于什么，先来看一张图，可能大家在其它地方也看过，辅助我们理解

在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。

根据上图示意，不难看出，不管文字的大小，它们都是基于基线（baseline）来确定垂直方向的定位（可看helloWorld和世界你好的底部是在同一水平线的）

看到这里有的同学应该就想到了，可以通过设置vertical-align修改对齐方式不就好了吗？我们来试试先把世界你好的设置下vertical-align: middle试一试

可以看到耶，为什么没有效果，这时可能同学就要急了，但先别急，你在把HelloWorld也设置一下试试

.children1 {
  font-size: 42px;
  background-color: red;
  vertical-align: middle;
}
.children2 {
  font-size: 24px;
  background-color: yellow;
  vertical-align: middle;
}

这个时候效果就出来了，怎么样，是不是很神奇~

我们再来一起看 vertical-align

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

如果我们只设置一个元素的 vertical-align 属性的化，那么就是后设置的和前面的对齐，我们可以把这两个大小字体调换下顺序，然后单独给HelloWorld设置middle

可以看到这个字体是有点向下偏移一点点，原因就是这时它是跟小字号的baseline对齐了

我们同样把两个都设置成middle再看下

这时就正常啦~简单总结一下，就是在使用vertical-align这个属性进行垂直对齐居中时，一定要注意，如果有多个元素，一定要保证他们的基准线是一致的，这样才能达到我们想要的效果

容导读

当父div的行高等于自身高度时，内部的行内元素会上下居中显示。行内块没有固定高度时也会上下居中显示。所以需要对父div的 line-height 进行调整。利用定位属性（top、left、right、bottom）百分比的模式。若为100%，则代表偏移的长度为父div的高度（宽度）的100%。定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置 margin:auto 会使它居中显示。

转载自喜欢JS的无名小站

例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;)。让其上下左右居中。

方法一（varticle-align）

理念

利用表格单元格的居中属性。

步骤

父div外层配置一个div，同时设置为表格元素 (display: table)，宽度为100%
父div配置为表格单元格元素 (display: table-cell)
父div配置居中属性（vertical-align: middle），使子div上下居中
子div通过margin配置左右居中（margin-left:auto; margin-right:auto）

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .table {display: table; width: 100%;}
 .father {display: table-cell; vertical-align: middle;}
 .son {margin: auto;}
</style>
<body>
 <div class="table" >
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
 </div>
</body>

注：

表格单元格比较特殊，如果只有一个单元格时，它的宽度默认会占父级（table|tr）宽度的100%;
table默认宽度不会撑开，需要手动配置width:100%；

方法二(line-height)

理念

当父div的行高等于自身高度时，内部的行内元素会上下居中显示。行内块没有固定高度时也会上下居中显示。通过文本居中属性text-align:center,可以使内部行内元素或行内块元素左右居中显示。

步骤

子div设定为行内块元素(display:inline-block)；
父div设置行高(line-height)使子div上下居中
父div设置文本居中(text-align:center)使子div左右居中。

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {line-height: 500px; text-align: center; font-size: 0;}
 .son { display: inline-block;
 /* display: inline-flex;
 display: inline-grid;
 display: inline-table; */
 }
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

注：行高如果设置为当前父div的高度(400px)的话，有固定高度的子div并不会居中显示的，问题出在浏览器默认将其当做文本居中的，即把它当做了一段文本（chrome默认font-size:16px;hight:21px）进行居中，没把它当做高度100px进行居中。所以需要对父div的line-height进行调整。以font-size:0（对应的字体高度为0）为例子，则需要line-height增加一个子div的高度（400px + 100px;）。

方法三（定位）

理念

利用定位属性（top、left、right、bottom）百分比的模式。若为100%，则代表偏移的长度为父div的高度（宽度）的100%。

步骤

父div标记下定位（position:relative|absolute|fixed）;子div绝对定位（position:absolute）
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {position: relative;}
 .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
 }
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

方法四（定位）

理念：

定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。

步骤：

父div标记下定位（position:relative|absolute|fixed|sticky）;子div绝对定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {position: relative;}
 .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

方法五（flex）

理念

弹性盒子，自带的一个居中功能

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {display: flex; align-items: center}
 .son {margin: auto}
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

flex兼容性，以及存在的已知问题

结尾

方法二和方法三兼容性要比其它好些

参考资料

Can I use
css-vertical-center-solution
CSS实现垂直居中的5种方法--前端观察

● ●

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。

在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:

<div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>

鞋子图片会改变，但是他们都会保持500pxX500px的大小。 HSL colors 用于使背景颜色保持一致。

使用text-align水平居中

有时显而易见的方案是最佳的选择：

div.center { text-align: center; background: hsl(0, 100%, 97%);
}
div.center img { width: 33%; height: auto;}

这种方案没有使图片垂直居中：你需要给<div>添加padding或者给内容添加margin-top和margin-bottom使容器与内容之间有一定的距离。

使用 margin: auto 居中

这种方式实现水平居中和上面使用text-align的方法有相同局限性。

div.center { background: hsl(60, 100%, 97%);}

div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}

注意：必须使用display: block使margin: 0 auto对img元素生效。

使用table-cell居中

使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。

<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>

CSS:

.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
.center-core img { width: 33%; height: auto;}

注意：为了使div不折叠必须加上width: 100%，外部容器元素也需要加上一定高度使得内容垂直居中。给html和body设置高度后，也可以使元素在body垂直居中。此方法在IE8+浏览器上生效。

使用absolute定位居中

这种方案有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height：

.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Stephen在他的博客中演示了这种方案的几种变化。

使用translate居中

Chris Coiyer 提出了一个使用 CSS transforms 的新方案。同样支持水平居中和垂直居中:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}

但是有以下几种缺点:

CSS transform 在部分就浏览器上需要使用前缀。
不支持 IE9 以下的浏览器。
外部容器需要设置height（或者用其他方式设置），因为不能获取绝对定位的内容的高度。
如果内容包含文字，现在的浏览器合成技术会使文字模糊不清。

使用Flexbox居中

当新旧语法差异和浏览器前缀消失时，这种方法会成为主流的居中方案。

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}

在很多方面 flexbox 是一种简单的方案，但是它有新旧两种语法以及早期版本的IE缺乏支持（尽管可以使用 display: table-cell作为降级方案）。

现在规范已经最终确定，现代浏览器也大都支持,我写了一篇详细的教程教程。

使用calc居中

在某些情况下比flexbox更全面：

.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

很简单，calc允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。我们需要把图片向左和向上各移动图片宽高的一半。计算公式为：

top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));

在现在的浏览其中你会发现，这种方法更适用于当内容的宽高为固定尺寸：

.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

我在这篇文章中详细讲解了calc。

这种方案和flex一样有许多相同的缺点：虽然在现代浏览器中有良好的支持，但是在较早的版本中仍然需要浏览器前缀，并且不支持IE8。

.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

当然还有其他更多的方案。理解这六种方案之后，web开发人员在面对元素居中的时候会有更多的选择。

关注“网页设计自学平台”订阅号回复以下｜关键字｜

｜dw教程｜js教程｜淘宝案例｜软件下载｜搜狐案例｜网站模板

｜ps教程｜ai教程｜ui教程｜腾讯案例｜ ae教程｜字体下载｜

｜上课素材｜前端特效｜华润万家案例｜最新dw案例｜

戳“阅读原文”入群获取最新高清前端视频！

在线咨询

上一篇：HTML中的图片区域链接方法详解-零基础自学网页制作
下一篇：最简单的 CSS 居中方式？分享 1 段优质 CSS 代码片段！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商