Wenn man eine Webseite programmiert, dann muss man immer wieder Dinge einmitten. Meistens sind diese Element ein Child-Element eines Parent / Eltern Elements. Wie in diesem Beispiel.

1
2
3
4
5
6
7

<div class="container">
        <div class="inhalt">
            <h2>hello</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto rem sint velit eum quasi! Maxime
                doloribus quod distinctio amet eveniet!</p>
        </div>
    </div>

Im heutigen Beitrag möchte ich euch 4 Wege zeigen wie ihr so ein Child Element mit CSS schön einmitten könnt und zwar von Oben nach Unten und von Links nach Rechts und natürlich soll das ganze also auch responsive sein. Also es werden keine Tricks verwendet wo man ausrechnen muss wieviele Pixel das ganze von Oben, Unten, Links und Rechts sein muss und ohne Media Queries.

Alles ist also komplett responsiv und dynamisch.

Den 1. und 2. Lösungsweg habe ich ja schon öfters in meinen Videos verwendet. Lösung 2 ist ja mit Flex und das ist eine praktische Angelegenheit, aber seit ich Grid als Alternative entdeckt habe – neige ich immer öfters zur Grid Lösung – darum muss ich klar sagen dass Lösung 3 oder 4 wirklich immer mehr meine Favoriten werden.

Welche Lösung gefällt euch am besten?

Video

HTML

1
2
3
4
5
6
7

<div class="container">
        <div class="inhalt">
            <h2>hello</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto rem sint velit eum quasi! Maxime
                doloribus quod distinctio amet eveniet!</p>
        </div>
    </div>

CSS

Hier habe ich jetzt das ganze CSS File auf einmal. Ihr seht immer schön welcher Lösungsweg es ist. Denkt daran die Nr 3 hat 2 Teile 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.container {
    height: 100vh;
    width: 100%;
    border: 5px red solid;
 
    /* lösung 2 
    display: flex;
    justify-content: center;
    align-items: center;
    */
 
    /* lösung 3
    display: grid;
    */
 
    /* lösung 4 
    display: grid;
    place-items: center;
    */
}
 
.inhalt {
    width: 400px;
    height: 150px;
    border: 1px #fff solid;
    padding: 20px;
 
    /* lösung 1
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
 
    /* lösung 3
    margin: auto;
    */
}