使用flexbox垂直居中放置项目

使用flexbox垂直居中放置项目

该

align-items

属性适用于 flex容器 （

display: flex

应用于元素的元素），而不适用于 flex项 （
flex容器的 子 项 ）。2009年的旧规格没有可比的性能

align-items

;

box-align

从2009年开始的物业符合

align-content

标准规格。

#trigger {  display: -webkit-flexbox;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-flex-align: center;  -ms-flex-align: center;  -webkit-align-items: center;  align-items: center;  text-align: center;  height: 10em;  background: yellow;}<div id="trigger">    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span></div>