I want to have a button image centred in a div of fixed size both horizontally and vertically.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#fixed-size {
width: 800px;
height: 600px;
border: 1px solid red;
display: block;
}
button {
padding: 0;
margin: auto;
display: block;
width: 256px;
height: 256px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="fixed-size">
<button>
<img src="aqua.png">
</button>
</div>
</body>
</html>
What should I write instead of button { /* ... */ }
for the button to be centered in a div
and not in a whole page?