Absolute mittig zentrieren

J

jemand anders

Erfahrenes Mitglied
Hallo,

jemand eine Idee, wie ich center zentriere?

Freundl. Grüße


HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <style>
        div { border:1px solid #ccc; margin:20px; padding:10px }
        .d1 { background:red }
        .d2 { background:green; margin-bottom:500px }
        .d3 { background:blue; margin-bottom:500px }
        .center { background: #999; position:absolute; text-align:center }
        .center > div { background-color:#fff }
        .center > div div:nth-child(2) { background-color:#eee }
    </style>
    
</head>

<body>

<div class="d1">
    Div 1
<div>

<div class="d2">
    Div 2
<div>

<div class="d3">
    Div 3
<div>

<script>

const d2 = document.querySelector('.d2');

d2.insertAdjacentHTML('beforebegin', `
      <div class="center">center
        <div>
          <div>Text Zeile 1 Text Zeile 1 Text Zeile 1 </div>
          <div>Text Zeile 2 Text Zeile 2 </div>
          <div>Text Zeile 3 Text Zeile 3 Text Zeile 3 </div>
        </div>
      </div>`)

</script>

</body>
</html>
 
auf dem .center Element:
CSS: 
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Die left- und right- Werte sind relativ zum Elternelement.
Die translate-Werte sind relativ zum Kind Element (in deinem Fall: .center)
 
Falscher Fehler von mir. Mit mittig meinte ich nur horizontal mittig. Bedeutet dann wohl:
CSS: 
left: 50%;
transform: translate(-50%)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück