Question

我想在页面的中心创建一个div，而div包含一个按钮，该按钮应位于该div的中心。

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

Answer 1

检查一下，希望它会有所帮助

.main{
  height:400px;
  background-color:#000;
  width:100%;
  position:relative;
}
.child{
  height:100px;
  position:absolute;
  background-color:#fff;
  width:100px;
}
.button{
  height:25px;
  position:absolute;
  background-color:red;
  width:25px;
}
.center{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

<div class="main">
  <div class="child center">
    <div class="button center"></div>
  </div>
</div>

Answer 2

尝试使用以下代码

<强> HTML

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

<强> CSS

body {
  position:relative;
}
.parent {
  position:absolute;
  width:200px;
  height:200px;
  background:red;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.button {
    padding: 10px 20px;
    background-color: grey;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

Answer 3

以下是简单且代码较少的

<!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>

Answer 4

使用flexboxes

＆＃13;

.main {
  height: 400px;
  background-color: black;
  width: 100%;
}

.child {
  height: 100px;
  width: 100px;
  background-color: red;
}

.main,
.child {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div class="main">
  <div class="child">
    <button>Button</button>
  </div>
</div>

＆＃13;

Div中间和div中间的按钮

4 个答案: