HTML 多色按钮页面 - 深绿色背景，垂直居中 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>多色按钮页面 - 深绿色背景</title>
	<style>
		body {
			background-color: darkgreen;
		}
		.buttons {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		.button {
			background-color: green;
			color: white;
			font-size: 1.5em;
			padding: 20px;
			margin-bottom: 20px;
			border: none;
			cursor: pointer;
		}
		.button:hover {
			opacity: 0.8;
		}
		.button-brown {
			background-color: brown;
		}
		.button-yellow {
			background-color: yellow;
			color: black;
		}
	</style>
</head>
<body>
	<div class='buttons'>
		<button class='button'>Button 1</button>
		<button class='button button-brown'>Button 2</button>
		<button class='button button-yellow'>Button 3</button>
	</div>
</body>
</html>