Html 中间的div和中间div的按钮_Html_Css

Html 中间的div和中间div的按钮

html css

Html 中间的div和中间div的按钮,html,css,Html,Css,我想在页面的中心做一个div，这个div包含一个按钮，应该在这个div的中心就像一个div应该在HTML页面的中间，然后div应该包含一个按钮，它也在那个div的中间。检查这个，希望它有助于 .main{ 高度：400px；背景色：#000；宽度：100%；位置：相对位置； } .孩子{ 高度：100px；位置：绝对位置；背景色：#fff；宽度：100px； } .按钮{ 高度：25px；位置：绝对位置；背景色：红色；宽度：25px； } .中心{ 最高：50%；左：5

我想在页面的中心做一个div，这个div包含一个按钮，应该在这个div的中心

就像一个div应该在HTML页面的中间，然后div应该包含一个按钮，它也在那个div的中间。

检查这个，希望它有助于

.main{
高度：400px；
背景色：#000；
宽度：100%；
位置：相对位置；
}
.孩子{
高度：100px；
位置：绝对位置；
背景色：#fff；
宽度：100px；
}
.按钮{
高度：25px；
位置：绝对位置；
背景色：红色；
宽度：25px；
}
.中心{
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

尝试使用以下代码

HTML

<div class="parent">
    <button class="button">Button</button>
</div>

以下是简单且较少的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <style>
        #buttonWithDiv {
            position: fixed;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            border-bottom-width: 1px;
            border-top-width: 1px;
            border-right-width: 1px;
            border-left-width: 1px;
            border-style: solid;
            border-color: #000000;
            text-align: center;
        }

        button {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="buttonWithDiv">
        <button type="submit">Click here to Start Test</button>
    </div>
</body>
</html>


测试页
#按钮带div{
位置：固定；
宽度：200px；
高度：200px；
最高：50%；
左：50%；
利润上限：-100px；
左边距：-100px；
边框底宽：1px；
边框顶部宽度：1px；
右边框宽度：1px；
左边框宽度：1px；
边框样式：实心；
边框颜色：#000000；
文本对齐：居中；
}
钮扣{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
单击此处开始测试

使用FlexBox

.main{
高度：400px；
背景色：黑色；
宽度：100%；
}
.孩子{
高度：100px；
宽度：100px；
背景色：红色；
}
梅因先生，
.孩子{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}


按钮

您可以为此使用

flexbox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <style>
        #buttonWithDiv {
            position: fixed;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            border-bottom-width: 1px;
            border-top-width: 1px;
            border-right-width: 1px;
            border-left-width: 1px;
            border-style: solid;
            border-color: #000000;
            text-align: center;
        }

        button {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="buttonWithDiv">
        <button type="submit">Click here to Start Test</button>
    </div>
</body>
</html>