Wie Message überlagernd einblenden?

Secundus

Grünschnabel
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:
CSS:
<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
HTML:
<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.
 
Lösung
So kannst Du das Div zentriert über dem Rest der Seite anzeigen:
Code:
.isa_info, .isa_success, .isa_warning, .isa_error {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
So kannst Du das Div zentriert über dem Rest der Seite anzeigen:
Code:
.isa_info, .isa_success, .isa_warning, .isa_error {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
 
Lösung
Zurück