# Move inside div and center on div not page

**URL:** https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024
**Category:** Coding Questions
**Created:** [July 28, 2019, 4:39pm UTC](https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024 "2019-07-28T16:39:46Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![nicolas\_nqn](https://avatars.discourse-cdn.com/v4/letter/n/a183cd/32.png) [@nicolas\_nqn](https://discourse.processing.org/u/nicolas_nqn)
#### Post date: [July 28, 2019, 4:39pm UTC](https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024/1 "2019-07-28T16:39:46Z")

</div>

Hi, i know how to move the canvas inside the div with .parent, but i cant seem to position the canvas centered on the div, when i use .position it uses the page coordinates not the div

```auto
var offsets = document.getElementById('sketch-holder').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

function setup() {

  var cnv = createCanvas(150, 150);
  var pos = cnv.parent('sketch-holder'); // Move the canvas so it’s inside our <div id="sketch-holder">.

  pos.position(10, 10);

  background(0);
  noStroke();

  fill(255);
  ellipse(36, 36, 72, 72); // (x, y, x:size, y:size)
}

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 28, 2019, 5:06pm UTC](https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024/2 "2019-07-28T17:06:02Z")

</div>

Maybe invoking method p5.Element::**center()** might work: 📏  
[p5js.org/reference/#/p5.Element/center](http://p5js.org/reference/#/p5.Element/center)  
`createCanvas(150, 150).parent(sketch-holder).center();`