blocks|key|4534900|text|您可以使用display:table/table-cell;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4534901|​|4534902|.a{
+++position:+absolute;+
++left:+50px;+
++top:+50px;
++display:table;
}
.b{
++text-align:+left;+
++display:table-cell;
++height:+56px;
++vertical-align:+middle;
++background-color:+pink;
}
.c+{
++background-color:+lightblue;
}|code-block|syntax|javascript|4534903|<div+class="a">
++<div++class="b">
++++<div+class="c"+>test</div>
++</div>
</div>|4534904|4534905|entityMap^0|5|D|J|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>You may use <code>display:table</code>/<code>table-cell;</code></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="a"&gt;
  &lt;div  class="b"&gt;
    &lt;div class="c" &gt;test&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|27495|text|首先请注意，vertical-align只适用于表格单元格和内联级别的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|27496|有几种方法可以实现垂直对齐，这些方法可能满足您的需求，也可能不满足您的需求。不过，我将向您展示我最喜欢的two+methods：|27497|1.使用transform和top|27498|​|27499|.valign+{
++++position:+relative;
++++top:+50%25;
++++transform:+translateY(-50%25);
++++/*+vendor+prefixes+omitted+due+to+brevity+*/
}|code-block|syntax|javascript|27500|<div+style="position:+absolute;+left:+50px;+top:+50px;">
++++<div+style="text-align:+left;+position:+absolute;height:+56px;background-color:+pink;">
++++++++<div+class="valign"+style="background-color:+lightblue;">test</div>
++++</div>
</div>|27501|27502|关键点是，top上的百分比值是相对于包含块的height的；而transforms上的百分比值是相对于框本身(边界框)的大小。|27503|如果您遇到font+rendering+issues+(模糊字体)，修复方法是将perspective(1px)添加到transform声明中，这样它就变成了：|27504|transform:+perspective(1px)+translateY(-50%25);|27505|值得注意的是，CSS+transform+is+supported+in+IE9%2B。|27506|2.使用inline-block+(伪)元素|27507|在这个方法中，我们有两个兄弟inline-block元素，它们通过vertical-align:+middle声明在中间垂直对齐。|27508|其中一个元素的height为其父元素的100%25，另一个元素是我们想要将其居中对齐的元素。|27509|27510|.parent+{
++++text-align:+left;
++++position:+absolute;
++++height:+56px;
++++background-color:+pink;
++++white-space:+nowrap;
++++font-size:+0;+/*+remove+the+gap+between+inline+level+elements+*/
}

.dummy-child+{+height:+100%25;+}

.valign+{
++++font-size:+16px;+/*+re-set+the+font-size+*/
}

.dummy-child,+.valign+{
++++display:+inline-block;
++++vertical-align:+middle;
}|27511|<div+style="position:+absolute;+left:+50px;+top:+50px;">
++++<div+class="parent">
++++++++<div+class="dummy-child"></div>
++++++++<div+class="valign"+style="background-color:+lightblue;">test</div>
++++</div>
</div>|27512|27513|最后，我们应该使用其中的一个available+methods+to+remove+the+gap+between+inline-level+elements。|27514|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/25776315#25776315|1|https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474|2|http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/|3|https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility|4|https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements^0|6|E|0|1G|3|0|1K|7|1|0|4|9|E|3|0|0|0|0|0|5|3|M|6|V|9|0|14|G|1N|9|5|L|2|0|0|B|9|L|K|3|0|4|C|0|E|C|X|M|0|7|6|J|4|0|0|0|0|0|E|1T|4|0^^$0|@$1|2|3|4|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]|$9|22|A|23|1|24]]|E|$]]|$1|H|3|I|5|6|7|25|8|@$9|26|A|27|B|C]|$9|28|A|29|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|2A|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|2B|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|2C|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|2D|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|2L|8|@$9|2M|A|2N|B|C]|$9|2O|A|2P|B|C]]|D|@$9|2Q|A|2R|1|2S]]|E|$]]|$1|X|3|Y|5|N|7|2T|8|@]|D|@]|E|$O|P]]|$1|Z|3|10|5|6|7|2U|8|@$9|2V|A|2W|B|C]]|D|@$9|2X|A|2Y|1|2Z]]|E|$]]|$1|11|3|12|5|6|7|30|8|@$9|31|A|32|B|C]]|D|@]|E|$]]|$1|13|3|14|5|6|7|33|8|@$9|34|A|35|B|C]|$9|36|A|37|B|C]]|D|@]|E|$]]|$1|15|3|16|5|6|7|38|8|@$9|39|A|3A|B|C]|$9|3B|A|3C|B|C]]|D|@]|E|$]]|$1|17|3|K|5|6|7|3D|8|@]|D|@]|E|$]]|$1|18|3|19|5|N|7|3E|8|@]|D|@]|E|$O|P]]|$1|1A|3|1B|5|N|7|3F|8|@]|D|@]|E|$O|P]]|$1|1C|3|K|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|3H|8|@]|D|@$9|3I|A|3J|1|3K]]|E|$]]|$1|1F|3|-4|5|6|7|3L|8|@]|D|@]|E|$]]]|1G|$1H|$5|1I|1J|1K|E|$1L|1M]]|1N|$5|1I|1J|1K|E|$1L|1O]]|1P|$5|1I|1J|1K|E|$1L|1Q]]|1R|$5|1I|1J|1K|E|$1L|1S]]|1T|$5|1I|1J|1K|E|$1L|1U]]]]

<p>First of all note that <code>vertical-align</code> is only applicable to table cells and inline-level elements.</p>
<p>There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you <a href="https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/25776315#25776315">two</a> <a href="https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474">methods</a> from my favorites:</p>
<h1>1. Using <code>transform</code> and <code>top</code></h1>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: absolute; left: 50px; top: 50px;"&gt;
    &lt;div style="text-align: left; position: absolute;height: 56px;background-color: pink;"&gt;
        &lt;div class="valign" style="background-color: lightblue;"&gt;test&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>The key point is that a percentage value on <code>top</code> is relative to the <code>height</code> of the containing block; While a percentage value on <code>transform</code>s is relative to the size of the box itself (the bounding box).</p>
<p>If you experience <a href="http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/" rel="noreferrer">font rendering issues</a> (blurry font), the fix is to add <code>perspective(1px)</code> to the <code>transform</code> declaration so it becomes:</p>
<pre><code>transform: perspective(1px) translateY(-50%);
</code></pre>
<p>It's worth noting that CSS <code>transform</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility" rel="noreferrer">is supported in IE9+</a>.</p>
<h1>2. Using <code>inline-block</code> (pseudo-)elements</h1>
<p>In this method, we have two sibling <code>inline-block</code> elements which are aligned vertically at the middle by <code>vertical-align: middle</code> declaration.</p>
<p>One of them has a <code>height</code> of <code>100%</code> of its parent and the other is our desired element whose we wanted to align it at the middle.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: absolute; left: 50px; top: 50px;"&gt;
    &lt;div class="parent"&gt;
        &lt;div class="dummy-child"&gt;&lt;/div&gt;
        &lt;div class="valign" style="background-color: lightblue;"&gt;test&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Finally, we should use one of the <a href="https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements">available methods to remove the gap between inline-level elements</a>.</p>


blocks|key|4535015|text|在随意定位的div中使用flex+blox将其内容居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4535016|请参见示例https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview|offset|length|4535017|.some-absolute-div+{++++
++display:+-webkit-box;
++display:+-webkit-flex;
++display:+-moz-box;
++display:+-moz-flex;
++display:+-ms-flexbox;
++display:+flex;

++-webkit-box-pack:+center;
++-ms-flex-pack:+center;
++-webkit-justify-content:+center;
++-moz-justify-content:+center;
++justify-content:+center;

++-webkit-box-align:+center;
++-ms-flex-align:+center;
++-webkit-align-items:+center;
++-moz-align-items:+center;
++align-items:+center;
}|code-block|syntax|javascript|4535018|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview^0|0|5|1G|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Use flex blox in your absoutely positioned div to center its content.</p>

<p>See example <a href="https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview" rel="noreferrer">https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview</a></p>

<pre><code>.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}
</code></pre>


blocks|key|4535032|text|使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4535033|.Absolute-Center+{
++++margin:+auto;
++++position:+absolute;
++++top:+0;+left:+0;+bottom:+0;+right:+0;
}|code-block|syntax|javascript|4535034|请参阅此链接：https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/|offset|length|4535035|entityMap|0|LINK|mutability|MUTABLE|url|https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/^0|0|0|7|2C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>use this : </p>

<pre><code>.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
</code></pre>

<p>refer this link: <a href="https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/" rel="noreferrer">https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/</a></p>


blocks|key|27617|text|下面是使用Top+object的简单方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|27618|例如:如果绝对元素大小是60px。|27619|.absolute-element+{+
++++position:absolute;+
++++height:60px;+
++++top:+calc(50%25+-+60px);
}|code-block|syntax|javascript|27620|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is simple way using Top object. </p>

<p>eg: If absolute element size is 60px. </p>

<pre><code>.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}
</code></pre>


blocks|key|4535109|text|垂直和水平居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4535110|.parent{
++height:+100%25;
++position:+absolute;
++width:+100%25;
++top:+0;
++left:+0;
}
.c{
++position:+absolute;
++top:+50%25;
++left:+0;
++right:+0;
++transform:+translateY(-50%25);
}|code-block|syntax|javascript|4535111|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Center vertically and horizontally:</p>

<pre><code>.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
</code></pre>


blocks|key|27681|text|您可以通过在父目录中使用display:table;和在子目录中使用display:+table-cell;+vertical-align:+middle;来完成此操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|27682|​|27683|<div+style="display:table;">
++++++<div+style="text-align:+left;++height:+56px;++background-color:+pink;+display:+table-cell;+vertical-align:+middle;">
++++++++++<div+style="background-color:+lightblue;+">test</div>
++++++</div>
++</div>|code-block|syntax|javascript|27684|27685|entityMap^0|C|E|Y|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|O|$]]

<p>You can do it by using <code>display:table;</code> in parent div and <code>display: table-cell; vertical-align: middle;</code> in child div </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display:table;"&gt;
      &lt;div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;"&gt;
          &lt;div style="background-color: lightblue; "&gt;test&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4535173|text|仅用于垂直中心|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4535174|​|4535175|++++<div+style="text-align:+left;+position:+relative;height:+56px;background-color:+pink;">
++++++++<div+style="background-color:+lightblue;position:absolute;top:50%25;++++transform:+translateY(-50%25);">test</div>
++++</div>|code-block|syntax|javascript|4535176|4535177|我总是这样做，这是一个非常简短和容易的代码，以水平和垂直居中|4535178|4535179|.center{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++transform:+translate(-50%25,+-50%25);
}|4535180|<div+class="center">Hello+Centered+World!</div>|4535181|4535182|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

<p>For only vertical center</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div style="text-align: left; position: relative;height: 56px;background-color: pink;"&gt;
        &lt;div style="background-color: lightblue;position:absolute;top:50%;    transform: translateY(-50%);"&gt;test&lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>I always do like this, it's a very short and easy code to center both horizontally and vertically</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center"&gt;Hello Centered World!&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to get blue container in the middle of pink one, however seems <code>vertical-align: middle;</code> doesn't do the job in that case.</p>

<pre><code>&lt;div style="display: block; position: absolute; left: 50px; top: 50px;"&gt;
    &lt;div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"&gt;
        &lt;div style="background-color: lightblue;"&gt;test&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Result:</p>

<p><img src="https://i.stack.imgur.com/s663O.png" alt="enter image description here"></p>

<p>Expectation:</p>

<p><img src="https://i.stack.imgur.com/OOIIO.png" alt="enter image description here"></p>

<p>Please suggest how can I achieve that. </p>

<p><a href="http://jsfiddle.net/kqmp1z9m/">Jsfiddle</a></p>


How to center div vertically inside of absolutely positioned parent div

容器

我试图在粉色的中间得到蓝色的容器，但是在这种情况下vertical-align: middle;似乎不能完成这项工作。<div style="display: block; position: absolute; left: 50px; top: 50px;">    <div style="text-align: l...

问如何使div在绝对定位的父div内部垂直居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使div在绝对定位的父div内部垂直居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使div在绝对定位的父div内部垂直居中
EN