Centrering

<style>
.centreratext {
text-align:center;
background-color:white;
}
</style>
...
<p class="centreratext">Textcentrering</p>

<style>
.centrerabild1 {
text-align:center;
background-color:white;
}
.centrerabild1 img {
width:100px;
}
.centrerabild2 {
width:100px;
margin:auto;
display:block; /* eftersom img är ett "inline"-element */
}
</style>
...
<p class="centrerabild1"><img src="bilder/ros.jpg alt="ros"></p>

<p><img src="bilder/ros.jpg alt="ros" class="centrerabild2"></p>

<style>
.centreradiv1 {
text-align:center;
background-color:aqua;
height:25px;
}
.special {
width:300px;
height:25px;
background-color:orange;
}

.centreradiv3 {
width:300px;
margin:auto;
background-color:violet;
}
</style>
...
<p class="centreradiv1">
  <div class="special">RUTA 1 - div i p, GÅR EJ</div>
</p>
<div class="centreradiv1">
   <div class="special"> RUTA 2 - div i div, går men    fungerar inte</div>
</div>
<br>
<div class="centreradiv3">RUTA 3 - BRA, bara en div</div>
<br><br>
<div class="centreradiv1">
   <p class="special">RUTA 4 - p i div, går men    fungerar inte</p>
</div>

<p></p>
<div class="centreradiv1">
   <div class="centreradiv3">RUTA 5 - div i div,    fungerar med width och auto som Ruta 3</div>
</div>

<style>
.centreravertikalt2 {
display: grid;
align-items: center;
justify-items: center;
height: 300px;
}
.bild100px {
width:100px;
}
</style>
...
<p class="centreravertikalt2">
<img src="bilder/ros.jpg" alt="ros" class="bild100px">
</p>