CSS - Centering Content with Transform

Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.

If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.

/* centering with transform */
.ui.modal {
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
   transform: transformX(-50%) transformY(-50%);
}