如何垂直对齐 div 中的元素？

How can I vertically align elements in a div?

提问人：Abdu 提问时间：9/17/2008 最后编辑：Youssouf OumarAbdu 更新时间：7/30/2023 访问量：1950971

问：

我有一个带有两个图像和一个.所有这些都需要在 div 内垂直对齐，彼此相邻。其中一个图像需要定位在 中。divh1absolutediv

这需要什么 CSS 才能在所有常见的浏览器上运行？

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>
HTML CSS 垂直对齐

评论

23赞 Muhammad Umer 5/23/2014
我列出了垂直对齐的所有方法。我要把它留在这里：jsfiddle.net/techsin/FAwku/1
3赞 Michael Benjamin 8/20/2015
这里有两种简单的方法，可以在 div 中垂直、水平或两者（纯 CSS）中居中元素： stackoverflow.com/a/31977476/3597276
1赞 CrippledTable 5/14/2020
margin-top：自动和margin-bottom：自动（适用于很多情况）。

答：

-8赞 dimarzionist 9/17/2008 #1 
<div id="header" style="display: table-cell; vertical-align:middle;">

...

或者 CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

浏览器覆盖范围

评论

2赞 Quentin 3/12/2010
vertical-align 属性不适用，因为 div 默认为 display： block，并且似乎没有采取任何措施来更改它。
3赞 MSpreij 6/25/2012
显然，显示已更新为，这使得工作。更好的是，它不需要嵌套的包装器/缓冲区 div，并且它适用于文本和图像（或两者兼而有之），并且您不需要更改位置属性。table-cellvertical-align: middle;
3赞 SwiftMango 12/17/2012
这个有效。它将显示更改为采用 vertical-align 属性的 table-cell。不知道为什么人们会投票否决。
1赞 Pma 1/8/2013
是的，据我所知，这是在分区 +1 中垂直居中任何东西的侵入性最小的方法
0赞 Pma 1/9/2013
好吧，也许我的结论太快了......添加显示：table-cell breaks div margin 和 bordera additionaly display is outside div， border combined with border-radius shows round-corners inside the div istead of outside of outside
3赞 Mike Tunnicliffe 9/17/2008 #2

默认情况下，h1 是一个块元素，它将在第一个 img 之后的行上呈现，并将导致第二个 img 出现在块后面的行上。

为了阻止这种情况的发生，您可以将 h1 设置为具有内联流行为：

#header > h1 { display: inline; }

至于将 img 绝对定位在 div 中，您需要将包含的 div 设置为具有“已知大小”，然后才能正常工作。根据我的经验，您还需要将位置属性从默认值更改为 - position： relative 对我有用：

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

如果你能做到这一点，你可能想尝试逐步从 div.header 中删除高度、宽度、位置属性，以获得所需的最小属性，以获得你想要的效果。

更新：

下面是一个适用于 Firefox 3 的完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Example of vertical positioning inside a div</title>
            <style type="text/css">
                #header > h1 { display: inline; }
                #header { border: solid 1px red; 
                          position: relative; }
                #img-for-abs-positioning { position: absolute;
                                           bottom: -1em; right: 2em; }
            </style>
        </head>
    
        <body>
            <div id="header">
                <img src="#" alt="Image 1" width="40" height="40" />
                <h1>Header</h1>
                <img src="#" alt="Image 2" width="40" height="40" 
                     id="img-for-abs-positioning" />
            </div>
        </body>
    </html>

评论

4赞 Mike Tunnicliffe 9/19/2008
我应该注意的是，拥有正确的 DOCTYPE 有时会对 CSS 的呈现方式产生重大影响，尤其是在 Internet Explorer 上。我建议你选择一个已知的DOCTYPE，以符合严格的标准模式，这样你就可以期待浏览器之间的行为更加一致。
2赞 Cocowalla 11/10/2009
我不“期望”浏览器之间有任何一致性。唯一确定的方法是测试：/
16赞 Shog9 9/17/2008 #3

所有这些都需要在 div 中垂直对齐

如何对齐？图像的顶部与文本的顶部对齐？

其中一个图像需要在 div 中绝对定位。

相对于 DIV 的绝对定位？也许你可以勾勒出你在寻找什么......？

FD描述了绝对定位的步骤，以及调整元素的显示，使图像与它内联显示。为此，我要补充一点，您可以使用样式对齐图像：H1vertical-align

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...这会将标题和图像放在一起，顶部边缘对齐。存在其他对齐选项;请参阅文档。您可能还会发现删除 DIV 并将图像移动到元素内是有益的 - 这为容器提供了语义值，并且无需调整 ：H1H1

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
1129赞 Konrad Rudolph 9/17/2008 #4

哇，这个问题很受欢迎。这是基于对物业的误解。这篇优秀的文章解释了它：vertical-align

了解垂直对齐，或Gavin Kistner的“如何（不）垂直居中内容”。

“如何在 CSS 中居中”是一个很棒的 Web 工具，它有助于为不同情况找到必要的 CSS 居中属性。

简而言之（并防止链接腐烂）：

  • 内联元素（并且只有内联元素）可以通过 在其上下文中垂直对齐。但是，“上下文”不是整个父容器高度，而是它们所在的文本行的高度。jsfiddle 示例vertical-align: middle
  • 对于块元素，垂直对齐更难，并且很大程度上取决于具体情况：
    • 如果内部元素可以具有固定高度，则可以设置其位置并指定其 、 和 位置。jsfiddle 示例absoluteheightmargin-toptop
    • 如果居中元素由一条线组成，并且其父高度是固定的，则只需设置容器以填充其高度即可。根据我的经验，这种方法非常通用。jsfiddle 示例line-height
    • ...这样的特殊情况还有很多。

评论

198赞 Emilie 5/14/2013
“有效”解决方案（所以不是 ）的问题在于您必须指定一个固定的高度。对于响应式网页设计来说，可能性不大。vertical-align: middle
1赞 patricK 8/25/2013
我有这个结构： <div height=“##px”>我的文本 </ div> 对我有用 使用与div height属性相同的值设置属性lineHeight：“##px”（##，因为这个值在我的情况下是动态的） 谢谢
8赞 Alex W 10/17/2013
这也适用于 和 元素。如果您遇到此问题，请尝试调整容器元素（即上下文），因为它用于行框计算。inline-blocktable-cellline-heightvertical-align
3赞 shaunhusain 2/21/2016
css-tricks.com/centering-css-complete-guide<--这里介绍的一些不错的选择，我发现自己大部分时间都在求助于表/表单元格解决方案
3赞 koks der drache 4/4/2020
这个工具（howtocenterincsss.com）非常棒，因为它在我现有的 CSS 中开箱即用！这是非常罕见的。还记得过去，你必须从某个示例中复制整个样式表，有时甚至是示例 HTML，然后一个接一个地删除和重命名元素，直到它是我需要的。这个网站不是这种情况！
56赞 Romain 5/11/2011 #5

它对我有用：

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

评论

12赞 Pacerier 10/12/2012
所以它不再是“块”元素？
7赞 Ortomala Lokni 6/30/2014
然后如果你想水平对齐，它将不起作用，因为margin : 0 autodisplay: table-cell
17赞 Anita Mandal 4/2/2012 #6

使用此公式，它将始终无裂缝地工作：

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

评论

3赞 Alexa Adrian 2/13/2017
我从未在css中看到过这种选择器“#outer[id]”。那应该怎么做？如果我将有 class 而不是 id 怎么办？
29赞 abernier 4/17/2012 #7

我一个朋友的技巧：

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

在这里演示。

评论

1赞 nerdess 7/8/2013
此处更详细地介绍了此技术：css-tricks.com/centering-in-the-unknown
137赞 user2346571 5/3/2013 #8

我使用了这个非常简单的代码：

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

显然，无论您使用 a 还是 ，结果都不会改变。.class#id

评论

5赞 webMac 5/3/2018
以下是所有九种对齐可能性（上-中-下和左-中-右）的完整示例： jsfiddle.net/webMac/0swk9hk5
-3赞 Joel Moses 10/2/2013 #9

只是这个：

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

div 内部的单单元格表处理垂直对齐，并向后兼容石器时代！

1赞 Joel Moses 10/2/2013 #10

只需在 div 中使用一个单元格表即可！只需将单元格和表格高度和 with 设置为 100%，您就可以使用垂直对齐。

div 内部的单单元格表处理垂直对齐，并向后兼容石器时代！

-4赞 user1688793 11/23/2013 #11

这里只是另一种（响应式）方法：

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

-3赞 pr0gg3r 1/4/2014 #12 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>
17赞 Shadoweb 1/18/2014 #13

几乎所有的方法都需要指定高度，但通常我们没有任何高度。

所以这里有一个 CSS 3 三行技巧，不需要知道高度。

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

即使在 Internet Explorer 9 中也支持此功能。

替换为其供应商前缀：

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

来源：仅用 3 行 CSS 垂直对齐任何内容

评论

1赞 ucdream 5/14/2014
但这似乎只有在元素的父级高度固定时才有效。带有百分比值的属性“top”仅适用于具有固定高度的容器，对吗？
0赞 Shadoweb 5/14/2014
是的，它仅适用于某些情况，我后来在这种方法上遇到了问题......问题是要尽可能多地拥有可能性，一旦你需要一种可能性，你就会测试所有这些方法，直到你得到一个好的方法，因为所有方法都有在特定情况下不起作用的东西......
0赞 Arsh 7/28/2014 #14

我已经使用以下解决方案（没有定位和线高）一年多了。它也适用于 Internet Explorer 7 和 Internet Explorer 8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0赞 danigonlinea 9/16/2014 #15

这是我个人对 .idiv

JSFiddle 示例

[HTML全文]

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS的

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
24赞 VuesomeDev 10/14/2014 #16

要将块元素定位到中心（适用于 Internet Explorer 9 及更高版本），它需要一个包装器：div

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

评论

3赞 Simon 10/7/2017
由于元素被放置在“半像素”上，这种方法可能会导致元素模糊。对此的解决方案是设置元素的透视。变换： perspective（1px） translateY（-50%）;
12赞 joan16v 10/14/2014 #17

我的诀窍是在 div 中放置一个具有一行一列的表，设置 100% 的宽度和高度，以及属性 vertical-align：middle：

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

小提琴：http://jsfiddle.net/joan16v/sbqjnn9q/

评论

8赞 Kokodoko 12/11/2014
这似乎是避免很多头疼的最佳方法。我仍然对为什么CSS没有垂直对齐标准感到困惑。
350赞 E. Serrano 6/27/2015 #18

现在 Flexbox 支持正在增加，应用于包含元素的这个 CSS 将垂直居中所有包含的项目（除了那些指定对齐方式的项目，例如 align-self：start)

.container {
    display: flex;
    align-items: center;
}

如果还需要面向 Internet Explorer 10 及更早版本 （< 4.4 （KitKat）） Android 浏览器，请使用带前缀的版本：

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

评论

0赞 Boris Burkov 11/4/2015
一个很好的解决方案，谢谢。您能建议如何使 flexbox 显示水平滚动条，以防内部元素大于容器吗？（我正在尝试使内部元素在容器内可缩放/滚动，就像powerpoint中的画布一样）？可能吗？
2赞 shaunhusain 2/21/2016
@YazidErman此解决方案依赖于 flexbox，因此不，仅支持 IE 10 及更高版本或任何其他现代浏览器 caniuse.com/#search=flexbox Flexbox 在支持它的地方很棒，但并非无处不在。显示表和表单元格可能是最好的解决方案，容器只需要是表，居中的元素被包装成一个带有显示表单元格的元素，然后就可以居中，正如这里指出的其他一些答案一样。
1赞 Michael McKenna 5/1/2019
为什么我很难找到>.<感谢您的回答！可以确认这在其他答案不起作用的情况下对我有用。
3赞 icc97 5/21/2019
flexbox 上有用的 CSS 技巧指南，然后查看该部分align-items
0赞 BernieSF 7/8/2015 #19

对我来说，它是这样工作的：

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

使用 Bootstrap 类将“a”元素转换为按钮，现在它垂直居中在外部“div”内。

5赞 Henk-Martijn 12/17/2015 #20

使用 CSS 垂直居中，您可以让外部容器像表格一样工作，而内容像表格单元格一样。在这种格式中，您的对象将保持居中。:)

例如，我在 JSFiddle 中嵌套了多个对象，但核心思想是这样的：

[HTML全文]

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS的

.circle {
  /* Act as a table so we can center vertically its child */
  display: table;
  /* Set dimensions */
  height: 200px;
  width: 200px;
  /* Horizontal center text */
  text-align: center;
  /* Create a red circle */
  border-radius: 100%;
  background: red;
}

.content {
  /* Act as a table cell */
  display: table-cell;
  /* And now we can vertically center! */
  vertical-align: middle;
  /* Some basic markup */
  font-size: 30px;
  font-weight: bold;
  color: white;
}

多对象示例：

[HTML全文]

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS的

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

结果

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3赞 Dashrath 10/7/2016 #21

我们可以使用 CSS 函数计算来计算元素的大小，然后相应地定位子元素。

HTML 示例：

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

和 CSS：

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

在这里创建的演示： https://jsfiddle.net/xnjq1t22/

此解决方案适用于响应式和。divheightwidth

注意：calc 函数未测试与旧浏览器的兼容性。

4赞 Shiv 8/2/2017 #22

我找到了一种新的解决方法，可以使用 CSS 3 垂直对齐 div 中的多个文本行（我还使用 bootstrap v3 网格系统来美化 UI），如下所示：

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

根据我的理解，包含元素的文本的直接父级必须具有一定的高度。

38赞 WasiF 1/30/2018 #23

垂直和水平对齐元素

使用其中任何一个。结果是一样的：

  1. 引导程序 4
  2. CSS3的

Enter image description here

1. 引导程序 4.3+

对于垂直对齐：d-flex align-items-center

对于水平对齐：d-flex justify-content-center

对于垂直和水平对齐：d-flex align-items-center justify-content-center

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center container">
  <div>I am in Center</div>
</div>

2.CSS 3

.container {
    height: 180px;
    width:100%;
    background-color: blueviolet;
}

.container > div {
  background-color: white;
  padding: 1rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container center">
    <div>I am in Center</div>
</div>

评论

1赞 Mx. 7/25/2019
这两种方式基本相同，因为 Bootstrap 在其类中使用相同的 flex 属性。
2赞 JasonGenX 1/25/2020
Bootstrap 不是魔术。它受到影响每个人的相同 CSS 限制的约束。它只是向平均用户隐藏了它所做的事情。
109赞 Sameera Prasad Jayasinghe 8/1/2018 #24 
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

评论

10赞 modulitos 8/14/2018
我认为这个解决方案是最快和最容易理解的。也许是因为我没有足够的耐心去摸索所选的答案。Flexbox 所有的东西！
2赞 Samuel Slade 12/11/2019
添加修复了我缺乏水平居中的问题justify-content: center
0赞 Marc Roussel 3/1/2021
为什么我们需要 2 种样式的组合才能使垂直对齐适用于所有屏幕尺寸？如果我只使用 display：flex 并调整屏幕大小，则垂直对齐会丢失，但如果同时使用显示和对齐项，它就会起作用。
7赞 Dennis Don 3/8/2019 #25

使用 display flex 时，首先需要包裹要对齐的项的容器：

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

然后应用以下 CSS 内容来包装 div 或 outdiv 在我的示例中：

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

评论

0赞 Nick 3/9/2019
不鼓励仅代码答案。请添加一些解释，说明这如何解决问题，或者这与现有答案有何不同。从评论
2赞 Stephen 7/20/2019 #26

我最喜欢的方法是使用 CSS 网格：

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

16赞 akhtarvahid 7/29/2019 #27

将 child（） 居中对齐的四种方法。div

  • 绝对定位方式
  • Flexbox 方法
  • Transform/translate 方法
  • CSS 网格方法

浏览器对 CSS 网格的支持

Enter image description here

演示

/* Absolute Positioning Method */
.parent1 {
  background: darkcyan;
   width: 150px;
   height: 150px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* Flexbox Method */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  width: 150px;
  height: 150px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* Transform/Translate Method */
.parent3 {
  position: relative;
  width: 150px;
  height: 150px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* CSS grid */
.parent4, .parent5 {
  position: relative;
  width: 150px;
  height: 150px;
  background: darkcyan;
  display: grid;
  place-items: center;
}
.child4, .child5 {
  background: white;
  height: 30px;
  width: 30px;
}
.parent5 {
  display: grid;
  justify-items: centre;
  align-content: centre;
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>
<hr />

<div class="parent4">
  <div class="child4"></div>
</div>
<hr />

<div class="parent5">
  <div class="child5"></div>
</div>

3赞 MD TAREQ HASSAN 11/11/2020 #28

仅使用 Bootstrap 类：

  • div：class="container d-flex"
  • div 中的元素：class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container d-flex mt-5" style="height:110px; background-color: #333;">
  <h2 class="m-auto"><a href="https://hovermind.com/">H➲VER➾M⇡ND</a></h2>
</div>

0赞 Maxim Rysevets 12/11/2023 #29

我尝试使用 CSS flex 来做到这一点，但如果对象超出块，它会截断对象（使用“overflow： auto”）。

通过实验，我发现，如果您使用 Grid，则很容易将任何对象（线或块）居中。

我真的很喜欢这个解决方案，所以我在CMS Effcore中实现了它。

下面是一个代码示例：

<head>
    <style>
        [data-id^='example-'] {
          max-width: 800px;
          height: 200px;
          margin: 20px auto;
          background: gray;
        }
        [data-id^='example-'] img {
          width: 50px;
          height: 50px;
          border: 1px solid black;
          background: gray;
        }
    </style>
</head>
<body>
    <div data-id="example-1">
        <img src="gallery/pictures/thumbnail-01.png">
    </div>
    <div data-id="example-2">
        <img src="gallery/pictures/thumbnail-01.png">
    </div>
</body>
</html>

通过网格的示例：

/*
┌─────┬───────────────────────┬─────┐
│ 1fr │          1fr          │ 1fr │
├─────┼───────────────────────┼─────┤
│     │  ▲                    │     │
│     │ ◀┼──────────────────▶ │     │
│ 1fr │  │ 1px|max-content    │ 1fr │
│     │  │                    │     │
│     │  ▼                    │     │
├─────┼───────────────────────┼─────┤
│ 1fr │          1fr          │ 1fr │
└─────┴───────────────────────┴─────┘
*/

[data-id='example-1'] {
  display: grid;
  grid-template-columns: 1fr minmax(1px, max-content) 1fr;
  grid-template-rows   : 1fr minmax(1px, max-content) 1fr;
}

[data-id='example-1'] img {
  grid-column-start: 2;
  grid-row-start:    2;
}

通过“vertical-align”的示例。

[data-id='example-2'] {
  text-align: center;
  white-space: nowrap;
}

[data-id='example-2']:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

[data-id='example-2'] img {
  vertical-align: middle;
}

可以在此处找到实时代码示例： https://developer.mozilla.org/ru/play?id=Eyc%2BipG68bj%2FU6aDy%2Bk%2BrSo4K0qhZCU6X%2Fk6GwIGyoh5qd88KqDrGBU%2FI%2FwLKPa4%2BnJLhAb%2BA2AjMCFy

上一个：div 内的图像在图像下方有额外的空间

下一个：如何在 div 块内将文本居中（水平和垂直）？