Last Updated: February 25, 2016
· danzkusuma

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%);

2 Responses
Add your response

Can you be a bit more precise because I don't find any difference with or without the line "transform: transformX(-50%) transformY(-50%);"

over 1 year ago ·

There some code error, such as transformX and transformY.
Should be translateX and translateY

over 1 year ago ·