在div中垂直居中元素

2018-06-27 04:25:08

这个问题在这里已经有了答案：

Flexbox：水平和垂直居中8个答案

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

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

您可以使用flexbox来垂直对齐项目。 Flexbox有一个名为align-items的属性，你可以在这里查看：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

为了达到您想要的效果，您需要将以下内容添加到#tryone id样式中：

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

并从#trytwo删除（我已经删除这个，因为不再需要）：

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

这里有一个工作副本的翻译：https：//plnkr.co/edit/5jOUuMPUv4a1gvDdNfgV？p = preview

希望这可以帮助！

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