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

Question

我有一个div有两个图像和一个h1。所有这些都需要在div内垂直对齐，彼此相邻。

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

在所有常见浏览器上工作所需的CSS是什么？

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

Answer 1

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

Gavin Kistner的Understanding vertical-align, or "How (Not) To Vertically Center Content"。

“How to center in CSS”是一个很棒的网络工具，有助于为不同的情况找到必要的CSS中心属性。

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

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

Answer 2

几乎所有方法都需要指定高度，但通常我们没有任何高度。所以这里有一个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/

Answer 3

我的诀窍是在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/sbqjnn9q/

Answer 4

有两种方法可以垂直和水平对齐元素

Bootstrap 4
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;
    justify-content: 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>

Answer 5

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

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

#header > h1 { display: inline; }

至于将img绝对定位在div中，你需要将包含div设置为“已知大小”才能正常工作。根据我的经验，您还需要将位置属性更改为默认值 - 位置：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>

Answer 6

使用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/

Answer 7

我们可以使用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 height和width。

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

Answer 8

按照今天的说法，我找到了一个新的解决方法，使用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%;
}

根据我的理解，包含元素的文本的直接父级必须具有一些高度。我希望它也会对你有所帮助。谢谢！

Answer 9

只需在div中使用一个单元格表！只需将单元格和表格高度设置为100％即可，您可以使用vertical-align。

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

Answer 10

我一直在使用以下解决方案（没有定位和没有行高），因为一年多来，它也适用于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>

Answer 11

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

JSFiddle Example

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

Answer 12

现在Flexbox支持正在增加，应用于包含元素的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;
}

Answer 13

对我来说，它的工作方式如下：

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

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

Answer 14

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

Answer 15

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

Answer 16

只是这个：

<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内部的单格表处理垂直对齐，向后兼容回到石器时代！

Answer 17

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

Answer 18

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

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/

Answer 19

我是一个刚刚进入网络编程的.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>

Answer 20

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

...

或CSS

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

Browser Coverage

Answer 21

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

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

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

Answer 22

它对我有用：

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

Answer 23

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

Answer 24

我朋友的一项技巧：

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

DEMO在这里

Answer 25

要将块元素定位到中心（在IE9及以上版本中工作），需要一个包装器div：

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

Answer 26

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

对齐怎么样？图像的顶部与文本顶部对齐？

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

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

fd has described绝对定位的步骤，以及调整H1元素的显示，使图像与它内嵌。为此，我将添加您可以使用vertical-align样式对齐图像：

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

...这会将标题和图像放在一起，顶边对齐。存在其他对齐选项; see the documentation。您可能还会发现删除DIV并将图像移动到H1元素中是有益的 - 这为容器提供了语义值，并且无需调整H1的显示：

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

Answer 27

使用这个公式，它将始终没有裂缝：

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

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

问题描述投票：665回答：26

26个回答

有两种方法可以垂直和水平对齐元素

1. Bootstrap 4.3.X

2. CSS3

HTML

CSS

最新问题

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

问题描述 投票：665回答：26

26个回答

有两种方法可以垂直和水平对齐元素

1. Bootstrap 4.3.X

2. CSS3

HTML

CSS

最新问题

问题描述投票：665回答：26