vertically center elements in div

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

试试这个:(如果你不关心IE9）

#tryone{
  max-width:1000px;
  display: flex;
  align-items: center;
}
#trytwo{ 
  max-width: 550px;  
}

---

you can use flexbox in order to align items vertically. Flexbox has a property called align-items, you can check it out here: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

In order to achieve what you want, you'll need to add the following to the #tryone id styles:

#tryone{
   max-width:1000px;
   display:flex;
   align-items: center;
}

And remove from #trytwo (I've removed this since is no longer needed):

#trytwo{ 
    top: 50%;
    max-width: 550px;
    margin-top: 45px;
}

Here is a plunker with a working copy: https://plnkr.co/edit/5jOUuMPUv4a1gvDdNfgV?p=preview

Hope this helps!

链接地址: http://www.djcxy.com/p/76000.html

上一篇: 以flexbox为中心的CSS文本

下一篇: 在div中垂直居中元素