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

Question

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

其中一个图像需要absolute放在div中.

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

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

Answer 1

哇,这个问题很受欢迎.这是基于对vertical-align房产的误解.这篇优秀的文章解释了它:

vertical-alignGavin Kistner 理解或"如何(不)垂直居中".

"如何以CSS为中心"是一个很棒的网络工具,它有助于为不同的情况找到必要的CSS居中属性.

简而言之_{^{(并防止链接腐烂)}}:

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

Answer 2

现在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 3

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

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,结果都不会改变.

Answer 4

它对我有用:

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

Answer 5

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

Answer 6

我朋友的一项技巧:

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 7

要将块元素定位到中心(在IE9及以上版本中工作),需要一个包装器div:

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

Answer 8

所有这些都需要在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>

Answer 9

使用这个公式,它将始终没有裂缝:

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

Answer 10

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

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

Answer 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;
    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 13

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

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

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

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

Answer 14

在父div中制作中心子div的三种方法

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

演示

/* First 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;
}

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

/* Third 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>

Answer 15

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

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

超文本标记语言

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

CSS

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

多个对象示例：

超文本标记语言

<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

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

结果

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