CSS Centering with Transform

Because translateX(-50%) moves something back to the left 50% (because of the - negative value), which means it pairs with left: 50%; to center something.

If you want to use right: 50%; then use that with translateX(50%) to center.

* {margin:0;}span {  position: absolute;  top: 50%; right: 50%;  transform: translate(50%,-50%);  background: black;  color: white;}
body:after, body:before {  content: '';  position: absolute;  background: red;}
body:after {  top: 50%;  left: 0; right: 0;  height: 1px;}body:before {  left: 50%;  top: 0; bottom: 0;  width: 1px;}

<span>center me</span>

How to center object with CSS transform scale

You scale only some inner element inside the whole box, but expect see the whole box scaled. if you want to scale the white padding and all the inner content to stay visible (and be able to scroll to) you should add some wrapper inside with width: 100% and height: 100%, and scale it, so the whole content become scaled.

Also, as @HaoWu mentioned, you should set the transform-origin to 0 0.

The final product should look somewhat like this:

var scaled = false;
function toggleScale() {  var objects = document.getElementsByClassName('wrapper');  for (var i = 0; i < objects.length; i++) {    objects[i].style.transform = scaled ? 'scale(1)' : 'scale(3)';  }  scaled = !scaled;}

    .container {      width: 300px;      height: 200px;      border: 1px solid #000000;      left: 0px;      top: 0px;      margin: 10px;      overflow: auto;    }    .wrapper {      width: 100%;      height: 100%;      display: flex;      box-sizing: border-box;      align-items: center;      justify-content: center;      padding: 5px;      transform-origin: 0 0;    }    .object {      position: relative;      width: 120px;      height: 120px;      display: inline-block;      background-color: grey;      border-radius: 25px;      padding: 5px;      transform-origin: center;      transform: scale(1);    }

<input type="button" onclick="toggleScale()" value="Toggle Scale" />
<div class="container">    <div class="wrapper">        <div id="objectToScale" class="object">x</div>    </div></div>

Transform: translate(-50%, -50%)

The reason why transform: translate(-50%, -50%) is required is because you want the center of the element to line up with the center of its parent. In simple terms, it can be boiled down to translateX(-50%) translateY(-50%), which means:

move me leftwards by 50% of my width, along the x-axis, and
move me upwards by 50% of my height, along the y-axis

This effectively moves the center of the element to its original top left corner. Remember than when you set left: 50%; top 50% on the element, you are moving its top left corner to the center of its parent (which means it is not visually centered at all). By moving the element back leftwards and upwards by half of its width and height respectively, you sure that its center now aligns with the parent's center, making it visually horizontally + vertically centered.

As a proof-of-concept, see the code snippet below: hover over the parent to cause the child element's "ghost" to reposition itself by means of transform: translate(-50%, -50%):

body {  margin: 0;  padding: p;}
.parent {  background-color: #ccc;  width: 100vw;  height: 100vh;  position: relative;}
.child {  background-color: rgba(0,0,255,0.5);  width: 50px;  height: 50px;  position: absolute;  top: 50%;  left: 50%;}
.child::before {  background-color: rgba(255, 0, 0, 0.5);  position: absolute;  top: 0;  left: 0;  width: 50px;  height: 50px;  content: '';  transition: all .5s ease-in-out;}
body:hover .child::before {  transform: translate(-50%, -50%);}

<div class="parent">  <div class="child"></div></div>

Centering with CSS Transform or Flexbox which one is better supported?

Apples and oranges. absolute removes an element from the flow of the page, and flex doesn't do that. That may or may not work for you. transform has better browser support than flex, but flex is pretty widely supported (~97% browser support at the moment). Browser support is the only reason I would use absolute with transform over flex.

You can also use display: table-cell; text-align: center; vertical-align: middle; and do the same thing, and it has better support than either of the previous techniques. http://caniuse.com/#feat=css-table

Use whichever one works for your requirements.

center element(with 50px margin) using transform translate

Add a parent div to your div, for example:

HTML

<div class="box">
    <div class="box-in">
        
    </div>
</div>

and CSS

.box {
    display: flex;
    justify-content: center;
}

.box-in {
    margin: 50px;
    height: 100px;
    width: 400px;
    border: 1px solid green;
}

the css transform:translate to align a div in the center ist not working

I took a look with my browser inspector tool and saw the issue right away. Apparently internet explorer has a problem with the space you leave before you close the ")". The correct syntax would therefore be:

transform: translate(-50%, -50%);

instead of

transform: translate(-50%, -50% );

Center absolute block with transform: translate(-50%, -50%) way issue

The left: 50% causes the a element to have only 50% width, i.e. 50% of the parent element, since it starts in the middle and extends to the right border. So its contents wrap in your case, since they won't fit into 50% width.

I would suggest an alternative solution where flexbox does the centering (actually results in less CSS):

body {  padding: 50px;}
div {  width: 240px;  height: 150px;  border: 1px solid #ccc;  display: flex;  justify-content: center;  align-items: center;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head>
<body>  <div>    <a href="">Lorem ipsum dolor sit.</a>  </div></body>
</html>

How can I use a CSS transform to vertically-center two overlapping elements?

You should use position absolute instead of relative:

.vcenter {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Updated plunkr

CSS Centering with Transform