多个你不知道的 CSS 居中方案

平居中

内联元素

要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

对于多个内联元素，也可以使用text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

使用 flexbox 也可以快速居中元素：

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

对于多个内联的项目，也可以正常工作：

CSS Grid

使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。

.desk {
  display: grid;
  justify-content: center;
}

块元素

Auto Margin

宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素。

.plate {
  width: 120px;
  height: 120px;
 margin:0 auto;
}

对于多个块元素，它们应该包装在一个元素中，然后让这个父元素居中。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

对于 flexbox 同样也是使用 justify-content:center 来居中元素：

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

对于多个元素，我们不需要将它们包裹在一个元素中，flexbox 可以将它们都居中。

CSS定位

通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素宽度的情况下，可以使用负边距代替CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}
复制代码

垂直居中

一、内联元素

Vertical Padding

垂直居中元素最简单的方法之一是使用padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

vertical-align属性可用于一个或多个元素。

在此示例中，叉子和刀子应与桌子垂直居中。

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

为了对齐盘子，叉子和刀，我们可以使用 flexbox:

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

块元素

绝对定位

通过绝对定位元素，可以使用 CSS transform将元素垂直居中：

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果知道元素高度，则可以使用负边距代替transform。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中。

.desk {
  display: grid;
  align-items: center;
}

水平垂直居中

一、内联元素

Padding 和Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其他元素类型

绝对定位

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

Flexbox

通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：

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

CSS Grid

通过place-items属性就可以通过，它结合了justify-content和align-items:

.desk {
  display: grid;
  place-items: center;
}

本文转载自网络，仅供大家学习！

感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"头条号。码云上有我们开源的商城项目，知识付费项目，均是基于PHP+vue开发，学习研究欢迎使用，关注我们保持联系！

是poetry，点击上方“关注”，每天为你分享前端进阶与个人精进干货。

水平居中方案

方案一：text-align + inline-block

<div id="parent1">
 <div class="child">水平居中</div>
</div>

#parent1{
 text-align: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent1 .child{
 display: inline-block;
 background:#666;
 color:#fff;
}

方案二：margin：0 auto

<div id="parent2">
 <div class="child">水平居中</div>
</div>

#parent2{
 text-align: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent2 .child{
 display: table;
 margin: 0 auto;
 background:#666;
 color:#fff;
}

方案三：absolute+transform

<div id="parent3">
 <div class="child">水平居中</div>
</div>

#parent3{
 position: relative;
 background:#ddd;
 margin-bottom:20px;
}
#parent3 .child{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 background:#666;
 color:#fff;
}

方案四：justify-content

<div id="parent4">
 <div class="child">水平居中</div>
</div>

#parent4{
 display: flex;
 justify-content: center;
 background:#ddd;
 margin-bottom:20px;
}
#parent4 .child{
 margin:0 auto;
 background:#666;
 color:#fff;
}

垂直居中方案

方案一：利用 line-height 实现垂直居中

这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出

<div id="example1">
    单行文字垂直居中
</div>

#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

方案二利用 display: table 实现垂直居中

<div id="example2">
    <div class="inner">块区域垂直居中</div>
</div>

#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
   margin-bottom:20px;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

方案三 margin 填充这种方法需要知道内外容器的大小

<div id="example3">
    <div class="inner">块区域垂直居中</div>
</div>

#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
   margin-bottom:20px;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

方案四：经典 absolute 布局上下文垂直居中

<div id="example4">
    <div class="inner">块区域垂直居中</div>
</div>

#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
  margin-bottom:20px;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

方案五：absolute+transform

<div id="example5">
    <div class="inner">块区域垂直居中</div>
</div>

#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
 margin-bottom:20px;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

方案六利用margin：auto 居中

<div id="expample6">
    <div class="inner">Content here</div>
</div>

#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
  margin-bottom:20px;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

方案七利用 Flex布局居中

<div id="expample7">
    <div class="inner">Content here</div>
</div>

#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

作者介绍：poetry，专注前端进阶写作与个人精进干货，目前在上市公司负责小程序等相关的研发。

言

css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！

注：文中例子没写明html代码时，使用的是下面结构：

<div class="example example14">
    <div class="con">
        超级好用超级放心    
        <a href="https://tinypng.com/" target="_blank">在线压缩图片</a>
        <span>压缩完可以 </span> 
    </div>
</div>

只是类名会有所不同。

1、line-height

适用：单行文字（垂直居中）
原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。

// html
<div class="example">Lorem ipsam.</div>
// css
.example{
    width: 400px;
    background: #afddf3;
    line-height: 50px;
}

效果：

2、line-height + inline-block

原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为 inline-block。由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size：0来消除，从而达到完美的垂直居中。

.example2{
    width: 400px;
    border: 1px solid #dcdcdc;
    line-height: 100px;
    font-size: 0;
}
.example2 .con {
    display: inline-block;
    line-height: 2;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

3、:before + inline-block

原理：:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0，子元素font-size: 15px即可。

// css
.example3 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example3::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.example .con {
    width: 300px;
    font-size: 15px;
    background: #afddf3;
    display: inline-block;
    vertical-align: middle;
}

效果：

4、table + margin

适用情景：单对象（水平居中）
原理：将子元素设置块级表格，再设置水平居中。

.example4 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table;
    margin: 0 auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

5、table + table-cell + vertical-align: middle

适用情景：多对象（垂直居中）

// html
<div class="example example5">
    <div class="con">
        超级好用超级放心    
        <a href="https://tinypng.com/" target="_blank">在线压缩图片</a>
        <span>压缩完可以打包下载哦 </span> 
    </div>
    <div class="con">
        CSS-TRICKS
    </div>
</div>

// css
.example5 {
    display: table;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

6、absolute + margin 负值（推荐）

原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。
缺陷：需要设置居中元素的高度。

.example6 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example6 .con {
    position: absolute;
    top: 50%;
    height: 80px;
    margin-top: -40px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

7、absolute + margin auto（推荐）

原理：当元素设置为绝对定位后，它就抓不到整体可运用的空间范围，所以margin: auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。
缺陷：定位元素必须有固定的宽高（百分比也算）。 tips:上下左右四个方向要设置成一样的值。

.example7 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example7 .con {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

8、absolute + translate（推荐）

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用 transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。
显著优势：无需固定定位元素的宽高。

.example8 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example8 .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    background: #afddf3;
}

效果：

9、Flex + align-items（推荐）

适用情景：多行文字（垂直居中）
原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS

.example9 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example9 .con {
    font-size: 15px;
    background: #afddf3;
}

效果：

10、Flex + justify-content（推荐）

适用情景：多行文字（水平居中）
原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS

.example10 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    height: 80px;
    font-size: 15px;
    background: #afddf3;
}

效果：

11、Flex + :before + flex-grow

适用情景：多行文字（垂直居中）
原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS

.example11 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example11:before {
    content: '';
    flex-grow: .5;
}
.example11 .con {
    font-size: 15px;
    background: #afddf3;
}

效果：

12、Flex + margin（推荐）

.example12 {
    display: flex;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example12 .con {
    margin: auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果:

13、Flex + align-self

原理：align-self定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

.example13 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example13 .con {
    align-self: center;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

14、Flex + align-content

原理：align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），弹性项目有多项此属性才会发挥作用。

.example14 {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
    content: "";
    display: block;
    width: 100%;
}
.example14 .con {
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

效果：

以上就是我总结的css垂直或者水平居中技巧了。下面是一个比较常见的例子,往往是不想让图片发生变形并且不管尺寸大小均会显示在容器的正中央（以下例子应用的是第8条）。

<div class="imgbox-box">
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
</div>

.imgbox-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.imgbox {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ebf8ed;
    overflow: hidden;
}
.imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

效果：

结语

上面例子中，有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。不过我相信肯定不止这些方法，还有其他的值得我们去探究。若文中有错，请大家指正，谢谢！

在线咨询

上一篇：写个网页更简单了！让AI根据手绘原型生成HTML - 教程+代码
下一篇：APP精选-制作高逼格微信页面-易企秀！

您的项目需求

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

整合营销服务商

多个你不知道的 CSS 居中方案

平居中

块元素

CSS定位

垂直居中

块元素

CSS Grid

水平垂直居中

其他元素类型

Flexbox

CSS Grid

水平居中方案

方案一：text-align + inline-block

方案二：margin：0 auto

方案三：absolute+transform

方案四：justify-content

垂直居中方案

方案一： 利用 line-height 实现垂直居中

方案二 利用 display: table 实现垂直居中

方案三 margin 填充 这种方法需要知道内外容器的大小

方案四：经典 absolute 布局上下文垂直居中

方案五：absolute+transform

方案六 利用margin：auto 居中

方案七 利用 Flex布局 居中

言

1、line-height

2、line-height + inline-block

3、:before + inline-block

4、table + margin

5、table + table-cell + vertical-align: middle

6、absolute + margin 负值（推荐）

7、absolute + margin auto（推荐）

8、absolute + translate（推荐）

9、Flex + align-items（推荐）

10、Flex + justify-content（推荐）

11、Flex + :before + flex-grow

12、Flex + margin（推荐）

13、Flex + align-self

14、Flex + align-content

结语

您的项目需求

方案一：利用 line-height 实现垂直居中

方案二利用 display: table 实现垂直居中

方案三 margin 填充这种方法需要知道内外容器的大小

方案六利用margin：auto 居中

方案七利用 Flex布局居中