保证金 - 奇怪的行为

Question

我有以下问题。当我尝试使用

定位我的按钮时

margin: 0 auto;

它把按钮贴在左边。如果我输入任何数字，例如

margin: 0 100px;

它确实有效。我很好奇我错过了什么？我有

display: block;
width: 200px;

我想补充一点，我需要把这个按钮放在容器的底部。屏幕底部边缘的 3%，屏幕中间。

这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

和CSS

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}

提前致谢罗伯特

Answer 1

因为绝对位置如果您想将其居中，请尝试将其添加到您的代码中：

.btn{
left: 50%;
transform: translateX(-50%);

}

Answer 2

正如 VXp 在他的评论中所写：要在其容器内水平居中绝对定位的元素，您需要 left: 50%（将其左边框移动到中间）和 transform: translateX(-50%)（将其移动元素向后离开其自身宽度的一半） - 请参阅下面的代码片段，其中这些是对给定代码的唯一更改。（并且 margin: 0 auto 在这种情况下不会做任何事情，因为它是 position: absolute）

.container {
  width: 1100px;
  height: 100vh;
  margin: 0 auto;
  background-color: black;
  position: relative;
}

.group {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(53, 20, 131);
  position: absolute;
}

.element {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-color: rgb(131, 20, 44);
  position: absolute;
}

.btn {
  display: block;
  position: absolute;
  bottom: 3%;
  width: 200px;
  height: 46px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #fff;
  text-align: center;
  text-transform: capitalize;
  padding: 14px 0 0 0;
  font-size: 1em;
  font-weight: 100;
  text-decoration: none;
  color: rgb(119, 20, 20);
  border-radius: 25px;
  letter-spacing: 3px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>

<body>
  <div class="container">
    <div class="group">
      <div class="element">

      </div>
    </div>
    <a href="#" class="btn">button</a>
  </div>
</body>

</html>

Answer 3

你的margin: auto;不起作用的原因是你的按钮有一个position: absolute;

你当然想在不改变元素位置的情况下解决这个问题。对于 position: absolute;，您可以使用 left 和 right 属性： left: 0; 和 right: 0; 这将使元素居中，其位置相对于其父元素（的宽度）具有相对位置。

View the Code Snippet below in Full Page to have a better view.

.container {
    width: 1100px;
    height: 100vh;
    margin: 0 auto;
    background-color: black;
    position: relative;
}

.group {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(53, 20, 131);
    position: absolute;
}

.element {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: rgb(131, 20, 44);
    position: absolute;
}

.btn {
    display: block;
    position: absolute;
    left: 0; /* added */
    right: 0; /* added */
    bottom: 3%;
    width: 200px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #fff;
    text-align: center;
    text-transform: capitalize;
    padding: 14px 0 0 0;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;
    color: rgb(119, 20, 20);
    border-radius: 25px;
    letter-spacing: 3px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
    <div class="container">
        <div class="group">
            <div class="element">

            </div>
        </div>
        <a href="#" class="btn">button</a>
    </div>
</body>
</html>

保证金 - 奇怪的行为

margin - curious behaviour

html

css

margin