如何在div中垂直对齐元素?


791

我有一个包含两个图片的div和一个h1。它们都需要在div内垂直对齐,彼此相邻。

其中一张图片需要absolute放在div中。

要在所有常见的浏览器上运行,需要什么CSS?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

14
我列出了所有垂直对齐方式。.我将其留在这里:jsfiddle.net/techsin/FAwku/1
Muhammad Umer,

2
以下是将元素在div内居中放置的两种简单方法:垂直,水平或两个(纯CSS):stackoverflow.com/a/31977476/3597276
Michael Benjamin

1
margin-top:自动; margin-bottom:自动(适用于许多情况)。
CrippledTable

Answers:


930

哇,这个问题很流行。这是基于对vertical-align物业的误解。这篇出色的文章对此进行了解释:

vertical-align加文·基斯纳(Gavin Kistner )的“ 理解”或“如何(不)使内容垂直居中”

“如何在CSS中居中”是一个很棒的网络工具,可以帮助找到不同情况下必要的CSS居中属性。


简而言之(并防止链接腐烂)

  • 内联元素(并且内联元素)可以在上下文中垂直对齐vertical-align: middle。但是,“上下文”不是整个父容器的高度,而是它们所在的文本行的高度。jsfiddle示例
  • 对于块元素,垂直对齐更加困难,并且在很大程度上取决于特定情况:
    • 如果内部元件可以有一个固定的高度,可以使自己的立场absolute,并指定其heightmargin-toptop位置。jsfiddle示例
    • 如果居中元素由单条线组成 并且 其父级高度是固定的,则可以简单地设置容器的line-height高度以填充其高度。根据我的经验,这种方法用途广泛。jsfiddle示例
    • ……还有更多这样的特殊情况。

142
“有效”解决方案(不是vertical-align: middle)的问题在于您必须指定一个固定的高度。响应式Web设计不太可能。
艾米丽(Emilie)

1
我有这样的结构:<div height =“ ## px”>我的文字</ div>为我工作,使用与div height属性中使用的值相同的值设置属性lineHeight:'## px'(##,因为此值是动态的)(谢谢)
patricK

8
这也适用于inline-blocktable-cell元素。如果您对此有疑问,请尝试调整line-height容器元素(即上下文),因为它vertical-align在行框计算中使用。
亚历克斯W

1
css-tricks.com/centering-css-complete-guide <-这里提供的一些不错的选择是,尽管大部分时间我还是发现自己诉诸于表/表单元格解决方案
shaunhusain 2016年

1
这个工具(howtocenterincssss.com)非常棒,因为它可以我现有的CSS内直接使用!那是非常罕见的。记住以前必须从某个示例复制整个样式表的日子,有时甚至是示例HTML都必须一个接一个地删除并重命名元素,直到我需要它为止。这个网站不是这样!
康斯坦丁

190

现在对flexbox的支持正在增加,应用于CSS元素的CSS将使所包含的项垂直居中:

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

如果您还需要定位Explorer 10和旧的(<4.4)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;
}

一个很好的解决方案,谢谢。如果内部元素大于容器,您能否建议如何使flexbox显示水平滚动条?(我正在尝试使内部元素在容器内可缩放/滚动,如PowerPoint中的画布)?有可能吗?
鲍里斯·伯科夫

1
@YazidErman此解决方案取决于flexbox,因此不行,只有IE 10及更高版本支持或任何其他现代浏览器caniuse.com/#search=flexbox支持Flexbox的 地方很棒,但这并不止于此。显示表格和表格单元格可能确实是最好的解决方案,容器只需要是表格,居中的元素被显示表格单元格包裹着一个元素,然后就可以像这里的其他答案所指出的那样居中。
shaunhusain '16

1
为什么我这么难找到>。<感谢您的回答!可以确认这在其他答案无效的情况下对我有用。
Michael McKenna

1
Flexbox上有用的CSS技巧指南,然后查看一align-items
icc97,19年

1
在2020年,我们可以使用flexbox caniuse.com/#feat=flexbox
tonygatta

116

我使用了以下非常简单的代码:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

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


3
这是所有九种对齐方式的完整示例(上下中间和左中右): jsfiddle.net/webMac/0swk9hk5
webMac,

在2020年,我们可以使用flexbox caniuse.com/#feat=flexbox
tonygatta

对我来说

49

它为我工作:

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

9
因此,它不再是“阻止”元素了?
Pacerier,2012年

7
然后,如果您想与水平对齐margin : 0 auto,则由于display: table-cell
Ortomala Lokni,2014年

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

7
我认为这种解决方案是最快,最容易理解的。可能是因为我没有足够的耐心来选择所选择的答案。Flexbox所有的东西!
modulitos

1
加入的justify-content: center固定我的缺乏横向定心
塞缪尔·斯莱德

22

我的一个朋友的技术:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

在这里演示


1
此技术的详细说明如下:css-tricks.com/centering-in-the-unknown
nerdess 2013年

18

要将块元素定位到中心(在IE9及更高版本中有效),需要使用包装器div

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

2
由于该元素放置在“半像素”上,因此此方法可能导致元素模糊。解决方案是设置元素的角度。转换:Perspective(1px)translationY(-50%);
西蒙(Simon)

16

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

对齐方式如何?图片顶部与文字顶部对齐?

其中一张图片必须绝对位于div内。

相对于DIV绝对定位?也许您可以勾勒出您想要的东西...?

fd描述了绝对定位以及调整H1元素显示的步骤,以使图像与之内嵌显示。为此,我将添加您可以使用以下vertical-align样式对齐图像:

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

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

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

15

使用此公式,它将始终有效而不会出现裂缝:

#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>


2
我从未在CSS中看到过这种选择器“ #outer [id]”。那该怎么办?如果我要上课而不是身份证怎么办?
Alexa Adrian

12

几乎所有方法都需要指定高度,但是通常我们没有任何高度。
因此,这里有一个CSS3 3线技巧,它不需要知道高度。

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

甚至在IE9中也受支持。

其供应商前缀:

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

资料来源:http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


但这仅在元素父级的高度固定时才起作用。具有百分比值的属性“顶部”仅在固定高度的容器中起作用,对吗?
ucdream

是的,它仅在某些情况下有效,后来我对这种方法有问题...问题是要尽可能多地使用,并且在需要时尽快测试所有这些方法,直到获得好的方法为止,因为所有方法有在特定情况下
不起作用的

12

您可以通过两种方式垂直和水平对齐元素

  1. 引导程序4
  2. CSS3

在此处输入图片说明

1. Bootstrap 4.3.X

用于垂直对齐: d-flex align-items-center

用于水平对齐: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<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 bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>


1
两种方法基本相同,因为Bootstrap在其类中使用相同的flex属性。
Mx。

Bootstrap不是魔术。它受到影响每个人的相同CSS限制的约束。它只是从平均值中隐藏其功能。用户。
JasonGenX

10

我的技巧是在div内放置一个包含1行1列的表,设置宽度和高度的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/sbq​​jnn9q/


7
这似乎是避免大量抓挠的最佳方法。对于CSS为什么没有垂直对齐标准,我仍然感到困惑。
Kokodoko 2014年

5

#3在父div中使中心子div的方法

  • 绝对定位方法
  • 弹性盒法
  • 转换/翻译方法

    在此处输入图片说明

    演示版

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<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>


4

使用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%;
}

结果

结果

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


3

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

要阻止这种情况的发生,您可以将h1设置为具有内联流行为:

#header > h1 { display: inline; }

至于将img绝对定位在div中,您需要将包含div设置为“已知大小”,然后才能正常工作。以我的经验,您还需要将position属性更改为默认值-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
我应该注意,正确的DOCTYPE有时可能会极大地改变CSS的呈现方式,尤其是在Internet Explorer上。我建议您选择已知符合严格标准模式的DOCTYPE,以便可以期望浏览器之间的行为更加一致。
Mike Tunnicliffe

2
我不会“期望”浏览器之间的任何一致性..唯一可以确定的方法是测试:/
Cocowalla

3

我们可以使用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/

此解决方案与响应式div heightwidth很好。

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


3

今天,我发现了一个新的解决方法,可以使用CSS3在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%;
}

根据我的理解,包含元素的文本的直接父级必须具有一定的高度。希望对您有帮助。谢谢!


非常干净的解决方案。这对我很好。
阿卡隆达'19

2

我最喜欢的新方法是使用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>


1

只需在div中使用一个单元格表格!只需将单元格和工作台的高度设置为100%,就可以使用垂直对齐。

div内的一个单元格表格可以进行垂直对齐,并且可以向后兼容Stone Stone!


0

自一年多以来,我一直在使用以下解决方案(无定位且无行高),它也适用于IE 7和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

这是我对div中的i元素的个人解决方案

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

0

对我来说,它是这样工作的:

<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”内部垂直居中。


0

使用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;
}

不鼓励仅使用代码的答案。请添加一些有关如何解决问题或与现有答案有何不同的解释。From
尼克

-3

只是这个:

<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内的一个单元格表格可以进行垂直对齐,并且可以向后兼容Stone Stone!


-3
<!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>

-4

这只是另一种(响应)方法:

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/


-4

我是一个刚接触Web编程的.NET专家。我没有使用CSS(好一点)。我使用了一些JavaScript来完成垂直居中以及jQuery的.css函数。

我只是发布测试中的所有内容。它可能不会过分优雅,但到目前为止已经可以使用。

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

7
您正在教新的Web开发人员如何做错事情,HTML用于定义内容,CSS用于样式化HTML,JavaScript用于在运行时根据条件进行操作。
混淆

-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

或CSS

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

浏览器覆盖率


1
由于显示了div,所以vertical-align属性不适用:默认情况下为block,似乎没有做任何更改。
昆汀2010年

3
显然,显示已更新为table-cell,可以vertical-align: middle;正常工作。更好的是,它不需要嵌套的包装器/缓冲区div就可以工作,并且它同时适用于文本和图像(或两者),并且您不需要更改position属性。
MSpreij 2012年

3
这个作品。它将显示更改为具有vertical-align属性的table-cell。不知道为什么人们对此表示反对。
texasbruce

1
是的,据我所知,这是在div中将任何垂直居中对齐的最小干扰方式。+1
Pma

好的,也许我的结论太快了……添加display:table-cell打破了div的边距,并且在div的外部显示了额外边框,边框与border-radius的组合显示了div内的圆角而不是外部
Pma
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.