CSS在底部和中心对齐垂直

Question

我找到了很多解决方案，但没有一个对我有用。 在下面的标记中，文本＆＃34; lorem ipsum示例＆＃34;应该在底部对齐并居中。我似乎无法解决这个问题！

＆＃13;

＆＃13;

#box {
		background:#6CCB61	
	}
	.wrapper div {
		height: 240px;
        width:100%;
		margin: 10px 0 20px 0;
		box-sizing:border-box;
		padding: 10px;
		color:white;
		text-align:center;
	}
	#boxGreen span {
		vertical-align: bottom;
	}

	.wrapper {
		width:auto;		
		margin: 0 10px;
	}
	#boxGreen {
		width:100%;	
	}
}

＆＃13;

<div class="wrapper">        
        <div id="box">
        	<span>Lorem Ipsum Example</span>
        </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

#box {
    background:#6CCB61;
    position: relative;
}

#box span {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

https://jsfiddle.net/veefmgna/