css - NativeScript - display element centered on tap -

i have problem css nativescript.

(the solution normal webapp is: translate(-50%, -50%) isn't working nativescript)

what want: circle centered touch.

what now: circle not centered touch.

do have idea?

(when have 1 circle of 300px, can cheat "translate(-40%, -40%)" i'm looking solution xxxpx)

=====

answer: given theoriginaljosh

i have remove in css:

• the "px"

and in script:

• soustract 50% of width , height top , left properties.

====

the html

<absolutelayout #container> </absolutelayout> 

the component

@viewchild('container') absolutelayout: elementref;  public ontap(args: touchgestureeventdata) {     if (args && args.action === 'down') {         let xcoord = args.getx();         let ycoord = args.gety();          let label3 = new label();         label3.top = ycoord;         label3.left = xcoord;         label3.classname = "circle three";          let label4 = new label();         label4.top = ycoord;         label4.left = xcoord;         label4.classname = "circle four";           this.absolutelayout.nativeelement.addchild(label3);         this.absolutelayout.nativeelement.addchild(label4);     } } 

the css

.circle {     color: blue ;     border-style: solid;     border-radius: 50%;      transform: translate(-50%, -50%);  } .three {     border-color: red;     width: 50px;     height: 50px;     border-width: 20px; }  .four {     border-color: blue;     width: 300px;     height: 300px;     border-width: 20px; }  

since know height , width of circles placing on page can subtract half of circles height , widths x , y coordinates. should center them.

public ontap(args: touchgestureeventdata) {     if (args && args.action === 'down') {     let xcoord = args.getx();     let ycoord = args.gety();      let label3 = new label();     label3.top = ycoord - 25;     label3.left = xcoord - 25;     label3.classname = "circle three";      let label4 = new label();     label4.top = ycoord - 150;     label4.left = xcoord - 150;     label4.classname = "circle four";       this.absolutelayout.nativeelement.addchild(label3);     this.absolutelayout.nativeelement.addchild(label4); } 

}

you may want check out nativescript-ng2-windchimes app on github it's year old has many of concepts you're trying do. https://github.com/nathanwalker/nativescript-ng2-windchimes