Interface

user-select
:none: can't be selected.
:text: can be selected.
:all: selects the highest ancestor.
:auto: let the browser decide.

This disables text selection for the second <p> element, preventing direct copy-and-paste attempts.
RESETRUNFULL

<!DOCTYPE html><html><head><style type="text/css">
   .noselect {
       user-select: none;
   }
</style></head><body>
   <p>Selectable text.</p>
   <p class="noselect">
      Unselectable text.
   </p>
</body></html>

<!DOCTYPE html><html><head><style type="text/css">
   .noselect {
       user-select: none;
   }
</style></head><body>
   <p>Selectable text.</p>
   <p class="noselect">
      Unselectable text.
   </p>
</body></html>

caret-color
: red: sets the color of the insertion caret, the visible marker, where the next character typed, will appear.

touch-action (on touchscreens only)
: auto: let the browser handles panning & zooming gestures.
: none: disables browser handling of panning & zooming gestures.
: pan-{x|y|up|down|left|righ}: enables single-finger panning gestures.
: pinch-zoom: enables multi-finger panning & zooming features.
: manipulation: enables panning and pinch-zooming gestures, but disables additional non-standard gestures such as double-tap zooming.
: pan-x pan-y pinch-zoom: same effect as 'manipulation'

cursor (sets the appearance of the cursor when the mouse pointer is on the element)
: crosshair: displays a crosshair (t)
: help: displays a help sign (?)
: move: displays a move sign (four-arrows)
: pointer: displays a pointer (hand finger)
: progress: displays a progress sign
: text: displays a text sign (I)
: context-menu
: cell
: text
: vertical-text
: alias
: copy
: no-drop
: not-allowed
: grab
: grabbing
: all-scroll
: col-resize
: row-resize
: wait
: e-resize
: w-resize
: n-resize
: s-resize
: ne-resize
: se-resize
: nw-resize
: sw-resize
: nesw-resize
: nwse-resize
: zoom-in
: zoom-out
: auto: the browser sets the cursor
: default: uses the default cursor
: url('a.gif'),url('b.cur'),auto; tries a.gif, then b.cur if that fails. Use the generic cursor auto if everything before fails.

pointer-events
: auto: the default.
: none: the element is never the target of mouse events. eg. passing a click to the layer behind.
: visiblePainted: (SVG only)
: visibleFill: (SVG only)
: visibleStroke: (SVG only)
: visible: (SVG only)
: painted: (SVG only)
: fill
: (SVG only)
: stroke: (SVG only)
: all: (SVG only)

This illustrates how to place something right at the center. If you wish to centralize something horizontally only, then you should use: { margin: 0 auto; }

As the visitor resizes the window, the dialog box remains at the center, shrinking or expanding along with the text. The dialog box is closed by clicking the 'X' at the upper right corner. Awesome Font is used to display the 'close' button.
RESETRUNFULL

<!DOCTYPE html><html><head>
   <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"      
         integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>   
   <style type="text/css">
      .center {
         margin:auto;
         position: absolute;
         top:0; 
         left:0; 
         bottom:0; 
         right:0; 
      }
      dialog {
         height: 50%; 
         width: 50%;
         outline: 3px dotted;
         font-size: 5vw;
         background: rgba(200,200,0,0.8);
      }
      .close {
         position: absolute;
         left:91%;
         top:1%;
      }
      .close:hover {
         font-weight: bold;
         cursor: pointer;
      }
      .boxMsg { 
         width:fit-content; 
         height:5vw;
      }
   </style>
</head><body style="height:500px">
   <a href="http://google.com" style="cursor:default; pointer-events:none;">Disabled Link</a>   
   <span style="background:black; color:white"  onclick="document.getElementsByTagName('dialog')[0].show()">
      Show Dialog Box
   </span>
   <dialog class="center" open>
      <i class="close fas fa-times-circle" onclick="document.getElementsByTagName('dialog')[0].close()"></i>
      <p class="center boxMsg">An error has occurred.</p>   
   </dialog>
</body></html>

<!DOCTYPE html><html><head>
   <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"      
         integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>   
   <style type="text/css">
      .center {
         margin:auto;
         position: absolute;
         top:0; 
         left:0; 
         bottom:0; 
         right:0; 
      }
      dialog {
         height: 50%; 
         width: 50%;
         outline: 3px dotted;
         font-size: 5vw;
         background: rgba(200,200,0,0.8);
      }
      .close {
         position: absolute;
         left:91%;
         top:1%;
      }
      .close:hover {
         font-weight: bold;
         cursor: pointer;
      }
      .boxMsg { 
         width:fit-content; 
         height:5vw;
      }
   </style>
</head><body style="height:500px">
   <a href="http://google.com" style="cursor:default; pointer-events:none;">Disabled Link</a>   
   <span style="background:black; color:white"  onclick="document.getElementsByTagName('dialog')[0].show()">
      Show Dialog Box
   </span>
   <dialog class="center" open>
      <i class="close fas fa-times-circle" onclick="document.getElementsByTagName('dialog')[0].close()"></i>
      <p class="center boxMsg">An error has occurred.</p>   
   </dialog>
</body></html>

MENU

Interface