CSS 中心按钮图像在 Div

Question

我想要一个按钮图像居中在 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 而不是整个页面？

Answer 1

我已将您的代码更改为按钮相对的位置，并且父级使用 flexbox 样式确保按钮居中

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>

CSS 中心按钮图像在 Div

CSS Center Button Image In Div

html

css

center