边距 0 自动不起作用，目标在页面开始时运行答案

【问题标题】：margin 0 auto doesn't work and target runs on page start边距 0 自动不起作用，目标在页面开始时运行
【发布时间】：2015-12-22 02:28:59
【问题描述】：

您好，我是 css 初学者，我的应用程序 html 页面有问题。我正在编写应用程序，我想创建登录视图，其中登录表单在语音命令或按钮单击后出现。我有 2 个问题，我无法将表单居中（在 jsbin 上，此 css 工作正常：D），并且我的目标事件（动画）在页面准备好后运行，而不是在链接单击后运行。这是我的 CSS：

    #przejscie
{
    width: 340px;
    display: block;
    opacity: 0;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    top: 500px;

 transition: transform 20s, background 50s;
 -o-transition: -o-transform 16s, background 0.5s;
 -moz-transition: -moz-transform 0.5s, background 0.5s;
 -webkit-transition: -webkit-transform 3s, opacity 2s, background 0.5s;
}
#przejscie:target
{
 transform: translate(-200);
 -o-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -webkit-transform: translate(0px,-300px );

  opacity: 1;
}

还有我的表格：

    <html>
<head>
     <script src="{% static 'js/artyom.min.js' %}"></script>
     <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{% static 'css/animacje.css' %}"/>
</head>

<h1><a href="#przejscie">Welcome register in our application</a></h1>

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2">

            <form method="post" action="/PPProject-web/register" class="form-signin">

                <label for="email" class="sr-only">Adres e-mail</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required>

                <label for="imie" class="sr-only">Imię</label>
                <input name="imie" class="form-control" id="imie"  placeholder="Imię" required>

                <label for="nazwisko" class="sr-only">Adres e-mail</label>
                <input name="nazwisko" class="form-control" id="nazwisko"  placeholder="Nazwisko" required>

                <label for="username" class="sr-only">Nazwa użytkownika</label>
                <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required>

                <label for="password" class="sr-only">Adres e-mail</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button>

            </form>
        </div>

</html>

ok 目标工作正常，但仍无法居中此 div。

【问题讨论】：

标签： html css

【解决方案1】：

自动边距（margin: 0 auto）在使用绝对位置时不参考焦点所在的空间。你需要改变你的“绝对”位置“相对”。

如果你需要使用绝对定位我推荐这个代码：

#przejscie{
    display: block;
    max-width: 100%;
    width:400px;
    margin:0 auto;
    position: relative;
    background:salmon;
}

  
  #przejscie2{
    width:400px;
    position:relative;
    background:red;
}



  .cont-form{
    width:100%;
    height:auto;
    display: flex;
    justify-content: center;
    background:yellow;

  }

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Adres e-mail</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required>

                <label for="imie" class="sr-only">Imię</label>
                <input name="imie" class="form-control" id="imie"  placeholder="Imię" required>

                <label for="nazwisko" class="sr-only">Adres e-mail</label>
                <input name="nazwisko" class="form-control" id="nazwisko"  placeholder="Nazwisko" required>

                <label for="username" class="sr-only">Nazwa użytkownika</label>
                <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required>

                <label for="password" class="sr-only">Adres e-mail</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button>

            </form>
        </div>


<br><br>

<div class="cont-form">
<div id="przejscie2" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Adres e-mail</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="E-mail" required>

                <label for="imie" class="sr-only">Imię</label>
                <input name="imie" class="form-control" id="imie"  placeholder="Imię" required>

                <label for="nazwisko" class="sr-only">Adres e-mail</label>
                <input name="nazwisko" class="form-control" id="nazwisko"  placeholder="Nazwisko" required>

                <label for="username" class="sr-only">Nazwa użytkownika</label>
                <input name="username" class="form-control" id="username" placeholder="Nazwa użytkownika" required>

                <label for="password" class="sr-only">Adres e-mail</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Hasło" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Zarejestruj się</button>

            </form>
        </div>
</div>

【讨论】：

【解决方案2】：

~~在我看来，您的文档似乎缺少<body> 标签。~~

编辑：好的，我认为这肯定与绝对定位有关，并且您的表单占据了 100% 的宽度。

margin: auto 查看元素的宽度，包括内边距和边框，计算它与容器宽度之间的差异，并在两侧用边距平均“填充”它。因此，如果表单占据了正文的整个宽度，则不会有任何边距。

绝对定位使元素“不流畅”，本质上导致它忽略其他元素。在这种情况下，浏览器不知道如何计算边距，因此将其视为零。

也许你可以试试position:relative？或者，您可以将所有四个位置属性设置为零以水平和垂直居中。（请参阅此答案：css absolute position won't work with margin-left:auto margin-right: auto。）

我测试了它添加position: relative 和width:50% 到#przejscie，它似乎工作。

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

【讨论】：

现在有了，但没有任何改变

【解决方案3】：

您需要定义要居中的元素的宽度

【讨论】：

我听说它需要宽度，但它没有帮助
您必须为#przejscie 定义宽度。如果你不知道它的宽度，你怎么能在 body 中居中？
尝试改变位置：绝对与位置：相对