margin 0 auto doesn't work and target runs on page start

Question

Hello i'm css begginer and i have problems with my application html page. I'm writing app and i want to create login view where login forms appears after voice command or button click. i have 2 problems i cant center my form (on jsbin this css works fine :D) and my target event (animation) runs after page is ready not after link click. this is my 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;
}

and my form:

    <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 target works fine but still can't center this div.

score 1 · Answer 1 · edited May 23 '17 at 12:15

~~Off the top of my head, your document appears to be missing a <body> tag.~~

Edit: Ok, I think it definitely has something to do with the absolute positioning, and the fact that your form is taking up 100% of the width.

margin: auto looks at the width of the element including padding and borders, calculates the difference between that and the width of the container, and "fills it in" equally on both sides with margin. So if the form is taking up the whole width of the body then there won't be any margins.

Absolute positioning takes an element "out of flow," essentially causing it to ignore other elements. The browser doesn't know how to calculate the margin in that case so it treats it as zero.

Perhaps you could try position:relative instead? Or you can set zero for all four position properties to center horizontally and vertically. (See this answer: css absolute position won't work with margin-left:auto margin-right: auto.)

I tested it adding position: relative and width:50% to #przejscie and it seemed to work.

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

it has it now but it doesn't changing anythin – Max Dec 21 '15 at 17:49 — Max, Dec 21 '15 at 17:49

score 1 · Answer 2 · answered Dec 21 '15 at 18:01

the automatic margin (margin: 0 auto) has no reference to the space where focus when using the absolute position. you need to change your "absolute" position "relative".

if you need to use absolute positioning I recommend this code:

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

score 0 · Answer 3 · answered Dec 21 '15 at 17:47

0

You need to define the width of the element you are centering

answered Dec 21 '15 at 17:47

David Auvray

288
1
3
20

i heard that it needs width but it's not helping – Max Dec 21 '15 at 17:51
You have to define a width for #przejscie. How can you center a div in the body if you don't know its width ? – David Auvray Dec 21 '15 at 17:55
Try to change position:absolute with position:relative – David Auvray Dec 21 '15 at 18:06

margin 0 auto doesn't work and target runs on page start

3 Answers3