CSS zentrieren

https://www.christianbachmann.ch/css-zentrieren/

by coffeefan

HTML

<html>
<body>
<div class="container">
  <span>Titel 1</span>
  <span>Titel 2 etwas länger</span>
  <span>Titel 3</span>
</div>
</body>
</html>

CSS

body {
    color: #000;
    font-size: 200%;
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    
}
.container{
  margin: 20px 0px;
  background: #CCC;
  overflow: auto;
  resize: both;
 
}

.container span{
  padding: 20px;
  background: #FFF;
  
}


/* margin auto*/
/*
.container {
  display: flex;
}
.container > * {
  margin: auto;
}
*/




/*grid place content*/
/*
.container{
  display: grid;
  place-content: center; 
  gap: 10px;
}
*/


/*flex*/
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/*padding center*/
/*
.container {
  padding: 5ch;
}
*/