CSS 底部和中心垂直对齐

Question

我找到了很多解决方案，但没有一个对我有用。 在以下标记中，文本“lorem ipsum example”应在底部对齐并居中。我似乎无法弄清楚!

#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%;	
	}
}

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

Answer 1

试试这个:

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

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

https://jsfiddle.net/veefmgna/