我想让一个按钮图像在水平和垂直方向上以固定大小的div 为中心。
<!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>
我应该写什么而不是button { /* ... */ }按钮在div而不是整个页面中居中？
我使用弹性框样式将代码更改为按钮相对的位置，父级确保内部按钮居中
justify-content: center和align-items: center
确保 Display Flex 父级的所有子项在水平和垂直方向上都位于中间。
如果您想了解更多信息，请查看此网站：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#fixed-size {
width: 800px;
height: 600px;
border: 1px solid red;
display: flex;/* changed */
justify-content: center;/* added */
align-items: center;/* added */
}
button {
padding: 0;
margin: auto;
display: block;
width: 256px;
height: 256px;
position: relative;/* changed */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="fixed-size">
<button>
<img src="aqua.png">
</button>
</div>
</body>
</html>