blocks|key|1262860|text|divs不能以这种方式垂直对齐，但是您可以使用边距或position:relative来修改它的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1262861|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.</p>


blocks|key|1262915|text|如果你知道高度，你可以对负的margin-top使用绝对定位，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1262916|#Login+{
++++width:400px;
++++height:400px;
++++position:absolute;
++++top:50%25;
++++left:50%25;
++++margin-left:-200px;+/*+width+/+-2+*/
++++margin-top:-200px;+/*+height+/+-2+*/
}|code-block|syntax|javascript|1262917|否则，就没有真正的方法可以仅使用CSS将div垂直居中|1262918|entityMap^0|E|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>If you know the height, you can use absolute positioning with a negative <code>margin-top</code> like so:</p>

<pre><code>#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}
</code></pre>

<p>Otherwise, there's no real way to vertically center a div with just CSS</p>


blocks|key|1048181|text|如果你使用的是高度固定的div，那么你可以根据你的设计需要使用填充顶部。或者你可以使用top:50%25。如果我们使用div，那么垂直对齐不起作用，所以我们根据需要使用填充顶部或位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048182|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.</p>


blocks|key|1048236|text|我发现这个网站很有用：http://www.vanseodesign.com/css/vertical-centering/这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1048237|HTML|1048238|<div+id="parent">
++++<div+id="child">Content+here</div>
</div>|code-block|syntax|javascript|1048239|CSS|1048240|#parent+{
++++padding:+5%25+0;
}

#child+{
++++padding:+10%25+0;
}|1048241|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vanseodesign.com/css/vertical-centering/^0|B|1F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I found this site useful: <a href="http://www.vanseodesign.com/css/vertical-centering/" rel="nofollow">http://www.vanseodesign.com/css/vertical-centering/</a>
This worked for me:</p>

<p>HTML</p>

<pre><code>&lt;div id="parent"&gt;
    &lt;div id="child"&gt;Content here&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}
</code></pre>


blocks|key|1048365|text|垂直对齐一直都很棘手。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048366|这里我介绍了一些垂直对齐div的方法。|1048367|http://jsfiddle.net/3puHE/|offset|length|1048368|HTML：|1048369|<div+style="display:flex;">

<div+class="container+table">
<div+class="tableCell">
<div+class="content"><em>Table</em>+method</div>
</div>
</div>

<div+class="container+flex">
<div+class="content+new"><em>Flex</em>+method<br></div>
</div>

<div+class="container+relative">
<div+class="content"><em>Position</em>+method</div>
</div>

<div+class="container+margin">
<div+class="content"><em>Margin</em>+method</div>
</div>

</div>|code-block|syntax|javascript|1048370|CSS：|1048371|em{font-style:+normal;font-weight:+bold;}
.container+{
++++width:200px;height:200px;background:#ccc;
++++margin:+5px;+text-align:+center;
}
.content{
++++width:100px;+height:+100px;background:#37a;margin:auto;color:+#fff;
}
.table{display:+table;}
.table+>+div{display:+table-cell;height:+100%25;width:+100%25;vertical-align:+middle;}
.flex{display:+flex;}
.relative{position:+relative;}
.relative+>+div+{position:+absolute;top:+0;left:+0;right:+0;bottom:+0;}
.margin+>+div+{position:relative;+margin-top:+50%25;top:+-50px;}|1048372|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|E]]]]

<p>Vertically aligning  has always been tricky.</p>

<p>Here I have covered up some method of vertically aligning a div.</p>

<p><a href="http://jsfiddle.net/3puHE/" rel="nofollow">http://jsfiddle.net/3puHE/</a></p>

<h2>HTML:</h2>

<pre><code>&lt;div style="display:flex;"&gt;

&lt;div class="container table"&gt;
&lt;div class="tableCell"&gt;
&lt;div class="content"&gt;&lt;em&gt;Table&lt;/em&gt; method&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="container flex"&gt;
&lt;div class="content new"&gt;&lt;em&gt;Flex&lt;/em&gt; method&lt;br&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="container relative"&gt;
&lt;div class="content"&gt;&lt;em&gt;Position&lt;/em&gt; method&lt;/div&gt;
&lt;/div&gt;

&lt;div class="container margin"&gt;
&lt;div class="content"&gt;&lt;em&gt;Margin&lt;/em&gt; method&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<h2>CSS:</h2>

<pre><code>em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table &gt; div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative &gt; div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin &gt; div {position:relative; margin-top: 50%;top: -50px;}
</code></pre>


blocks|key|1263138|text|http://jsfiddle.net/dvL512e7/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1263139|除非对齐的div具有固定的高度，否则请尝试对对齐的div使用以下CSS：|1263140|{
++margin:+auto;
++position:+absolute;
++top:+0;
++left:+0;
++bottom:+0;
++right:+0;
++display:+table;
}|code-block|syntax|javascript|1263141|entityMap|0|LINK|mutability|MUTABLE|url^0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="http://jsfiddle.net/dvL512e7/" rel="nofollow">http://jsfiddle.net/dvL512e7/</a></p>

<p>Unless the aligned div has fixed height, try using the following CSS to the aligned div:</p>

<pre><code>{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}
</code></pre>


blocks|key|1263206|text|我找到了一种对我很有效的方法。下一个脚本插入一个不可见的图像(与bgcolor或透明gif相同)，其高度等于屏幕上空白大小的一半。效果是完美的垂直对齐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263207|假设您有一个标题div+(height=100)和一个脚注div+(height=50)，并且要对齐的主div中的内容的高度为300：|1263208|<script+type="text/javascript"+charset="utf-8">
var+screen+=+window.innerHeight;
var+content+=+150+%2B+300;
var+imgheight+=+(+screen+-+content)+/+2+;
document.write("<img+src='empty.jpg'+height='"+%2B+imgheight+%2B+"'>");+
</script>+++|code-block|syntax|javascript|1263209|将脚本放在要对齐的内容之前！|1263210|在我的例子中，我喜欢对齐的内容是一个宽高比为100:85+(宽:高)的图像(width=95%25)，图像的高度是宽度的85%25。并且宽度是屏幕宽度的95%25。|1263211|因此，我使用了：|1263212|var+content+=+150+%2B+(+0.85+*+(+0.95+*+window.innerWidth+));|1263213|将此脚本与|1263214|<body+onResize="window.location.href+=+window.location.href;">|1263215|并且你有一个平滑的垂直对齐。|1263216|希望这也适用于你！|1263217|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment. </p>

<p>Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:   </p>

<pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("&lt;img src='empty.jpg' height='" + imgheight + "'&gt;"); 
&lt;/script&gt;   
</code></pre>

<p>You place the script just before the content that you want to align!</p>

<p>In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.</p>

<p>I therefore used:</p>

<pre><code>var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
</code></pre>

<p>Combine this script with</p>

<pre class="lang-html prettyprint-override"><code>&lt;body onResize="window.location.href = window.location.href;"&gt;
</code></pre>

<p>and you have a smooth vertical alignment.</p>

<p>Hope this works for you too!</p>


blocks|key|1263257|text|这可以用3行CSS来完成，并且可以兼容回(包括)+IE9：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263258|.element+{
++position:+relative;
++top:+50%25;
++transform:+translateY(-50%25);
}|code-block|syntax|javascript|1263259|示例：http://jsfiddle.net/cas07zq8/|offset|length|1263260|credit|1263261|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cas07zq8/|1|http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/^0|0|0|3|T|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>This can be done with 3 lines of CSS and is compatible back to (and including) IE9:</p>

<pre><code>.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
</code></pre>

<p>Example: <a href="http://jsfiddle.net/cas07zq8/" rel="noreferrer">http://jsfiddle.net/cas07zq8/</a></p>

<p><a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/" rel="noreferrer">credit</a></p>


blocks|key|1048594|text|@GáborNagy在another+post上的评论是我能找到的最简单的解决方案，对我来说很有吸引力，因为他带来了一个jsfiddle，我在这里复制了一个小补充：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1048595|CSS：|1048596|#wrapper+{
++++display:+table;
++++height:+150px;
++++width:+800px;
++++border:+1px+solid+red;
}

#cell+{
++++display:+table-cell;
++++vertical-align:+middle;
}|code-block|syntax|javascript|1048597|HTML：|1048598|<div+id="wrapper">
++++<div+id="cell">
++++++++<div+class="content">
++++++++++++Content+goes+here
++++++++</div>
++++</div>
</div>|1048599|如果你也想水平对齐，你必须在"cell“div中添加另一个div”inner+cell“，并赋予它这样的样式：|1048600|#inner-cell{
++++++width:+250px;
++++++display:+block;
++++++margin:+0+auto;
}|1048601|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4046395/vertical-align-a-div-with-dynamic-height-inside-another-div^0|B|C|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>@GáborNagy's comment on <a href="https://stackoverflow.com/questions/4046395/vertical-align-a-div-with-dynamic-height-inside-another-div">another post</a> was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:</p>

<p>CSS:</p>

<pre><code>#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="cell"&gt;
        &lt;div class="content"&gt;
            Content goes here
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:</p>

<pre><code>#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}
</code></pre>


blocks|key|1048634|text|我来得太晚了，但这是我自己想出来的，这是我最喜欢的垂直对齐快速技巧之一。这非常简单，而且很容易理解发生了什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1048635|您可以使用div+css属性在父:before的开头插入一个div，赋予它display:inline-block和vertical-align:middle，然后将这些相同的属性赋给子div。由于vertical-align用于沿直线对齐，因此这些内联div将被视为一条直线。|offset|length|style|CODE|1048636|将:before+div设为height:100%25，子级div将自动跟随并对齐到一条非常长的“线”的中间。|1048637|.parent:before,+.child+{
++++display:inline-block;
++++vertical-align:middle;
}
.parent:before+{
++++content:"";+//+so+that+it+shows+up
++++height:100%25;+//+so+it+takes+up+the+full+height
}|code-block|syntax|javascript|1048638|Here's+a+fiddle来演示我所说的内容。子div可以是任何高度，您永远不需要修改它的页边距/填充。|1048639|和here's+a+more+explanatory+fiddle。|1048640|如果你不喜欢:before，你可以手动放入一个div。|1048641|<div+class="parent">
++++<div+class="before"></div>
++++<div+class="child">
++++++++content
++++</div>
</div>|1048642|然后将.parent:before重新分配给.parent+.before|1048643|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/aor3dk24/1/|1|http://jsfiddle.net/aor3dk24/20/^0|0|G|7|11|K|1M|L|2R|E|0|1|7|E|B|0|0|0|F|0|0|1|W|1|0|6|7|0|0|3|E|M|F|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@$D|1J|E|1K|F|G]|$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1O|8|@]|9|@$D|1P|E|1Q|1|1R]]|A|$]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]]|A|$]]|$1|S|3|T|5|6|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|U|3|V|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|20|8|@$D|21|E|22|F|G]|$D|23|E|24|F|G]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

<p>I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.</p>

<p>You use the <code>:before</code> css attribute to insert a div into the beginning of the parent div, give it <code>display:inline-block</code> and <code>vertical-align:middle</code> and then give those same properties to the child div. Since <code>vertical-align</code> is for alignment along a line, those inline divs will be considered a line.</p>

<p>Make the <code>:before</code> div <code>height:100%</code>, and the child div will automatically follow and align in the middle of a very tall "line."</p>

<pre><code>.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}
</code></pre>

<p><a href="http://jsfiddle.net/aor3dk24/1/" rel="noreferrer" title="demo">Here's a fiddle</a> to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.<br>
And <a href="http://jsfiddle.net/aor3dk24/20/" rel="noreferrer" title="demo with explanation">here's a more explanatory fiddle</a>.</p>

<p>If you're not fond of <code>:before</code>, you can always manually put in a div.</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="before"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;
        content
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And then just reassign <code>.parent:before</code> to <code>.parent .before</code></p>


blocks|key|1263334|text|你试过这个吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263335|.parentdiv+{
+margin:+auto;
+position:+absolute;
+top:+0;+left:+0;+bottom:+0;+right:+0;
+height:+300px;+//+at+least+you+have+to+specify+height
}|code-block|syntax|javascript|1263336|希望这能有所帮助|1263337|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>have you try this one?</p>

<pre><code>.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}
</code></pre>

<p>hope this helps </p>


blocks|key|1263354|text|在我的firefox和chrome浏览器中是这样工作的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263355|CSS：|1263356|display:+flex;
justify-content:+center;+++++//+vertical+align
align-items:+center;+++++++++//+horizontal+align|code-block|syntax|javascript|1263357|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>In my firefox and chrome work this: </p>

<p>CSS: </p>

<pre><code>display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align
</code></pre>


blocks|key|1049477|text|我需要指定min-height|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1049478|#login
++++display:+flex
++++align-items:+center
++++justify-content:+center
++++min-height:+16em|code-block|syntax|javascript|1049479|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>I needed to specify min-height</p>

<pre><code>#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em
</code></pre>


blocks|key|1264231|text|将div元素居中的最简单方法是使用具有以下属性的类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264232|.light+{
++++margin:+auto;
++++width:+50%25;
++++border:+3px+solid+green;
++++padding:+10px;
}|code-block|syntax|javascript|1264233|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>simplest way to center your div element is to use this class with following properties.</p>

<pre><code>.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
</code></pre>


<p>I'm trying to make a small username and password input box.</p>

<p>I would like to ask, how do you vertically align a div?</p>

<p>What I have is:</p>

<pre><code>&lt;div id="Login" class="BlackStrip floatright"&gt;
   &lt;div id="Username" class="floatleft"&gt;Username&lt;br&gt;Password&lt;/div&gt;
   &lt;div id="Form" class="floatleft"&gt;
   &lt;form action="" method="post"&gt;
      &lt;input type="text" border="0"&gt;&lt;br&gt;
      &lt;input type="password" border="0"&gt;
   &lt;/form&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:</p>

<pre><code>vertical-align: middle;
</code></pre>

<p>in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.</p>


How to vertically center <div> inside the parent element with CSS?

我正在试着做一个小的用户名和密码输入框。我想问一下，如何垂直对齐div？我所拥有的是：<div id="Login" class="BlackStrip floatright">   <div id="Username" class="floatleft">Username<br>Password</div>   <d...

问如何使用CSS在父元素中垂直居中<div>？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS在父元素中垂直居中<div>？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS在父元素中垂直居中<div>？
EN