Wie Message überlagernd einblenden?

[Secundus]

Ich möchte (ohne JavaScript) mit css eine Nachricht einblenden zb. "Löschen erfolgreich"
Ich habe auch schon Code gefunden wo man das für ein paar Sekunden einblenden kann und dann blendet sich das wieder aus. Das finde ich schon mal gut. Leider ist das an einer bestimmten stelle auf der Webseite. Ich würde diese Message gerne in der Mitte überlagernd einblenden. So das der User einfach nur kurz informiert wird das dass Löschen erfolgreich war.

Hier das was ich habe:

<style>
  @-webkit-keyframes fadeInOut {0% {opacity: 0;} 16% {opacity: 1;} 84% {opacity: 1;} 100% {opacity: 0;}}
  @keyframes fadeInOut {0% {opacity: 0;} 16% {opacity: 1;} 84% {opacity: 1;} 100% {opacity: 0;}}
  .isa_info, .isa_success, .isa_warning, .isa_error {margin: 10px 0px;padding:12px;}
  .isa_info {color: #00529B;background-color: #BDE5F8;border-radius:.5em;}
  .isa_success {color: #4F8A10;background-color: #DFF2BF;border-radius:.5em;opacity:0;-webkit-animation: fadeInOut 3s;animation: fadeInOut 3s;}
  .isa_warning {color: #9F6000;background-color: #FEEFB3;}
  .isa_error {color: #D8000C;background-color: #FFD2D2;}
</style>

und im html dann

<div class='isa_success'>Löschen erfolgreich</div>

Das ist eine ganz einfache Webseite ohne Container. Einfach gerade aus in html und css erstellt..

Wäre nett wenn jemand helfen könnte. Danke.

 

[Sempervivum]

So kannst Du das Div zentriert über dem Rest der Seite anzeigen:

.isa_info, .isa_success, .isa_warning, .isa_error {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 

[Secundus]

Das funktioniert bestens. Danke für die schnelle Hilfe!