Center stats in a div

Questions
1

Hi.

I want to put stats (and dat.gui) in a sidebar (a div) but can’t find how to center it.
The fact is that I never developed for the web so I’m confused with all the css rules that interact with each other… This is probably a css problem.

Thanks.

Reproduction steps

  1. Define a canvas for the renderer
  2. Define a div for the sidebar
  3. Append the stats element in the sidebar
  4. Try to center the stats with the css but not working

Code

The JS (typescript) :

import './style.css'
import * as THREE from 'three'
import Stats from 'three/addons/libs/stats.module.js'


const sidebar = document.createElement('div')
sidebar.id = 'sidebar'
document.body.appendChild(sidebar)


const resizeHandle = document.createElement('div')
resizeHandle.id = 'resize-handle'
document.body.appendChild(resizeHandle)


const stats = new Stats()
sidebar.appendChild(stats.dom)

const threeCanvas = document.createElement('canvas')
threeCanvas.id = 'threeCanvas'
document.body.appendChild(threeCanvas)

const renderer = new THREE.WebGLRenderer({ canvas: threeCanvas })

The CSS :

:root {
  --sidebar-width: 275px; /* Largeur de la sidebar */
}

body {
  overflow: hidden;
  margin: 0px;
}

#threeCanvas {
  margin-left: var(--sidebar-width);
  background-color: #df1313;
}

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100%;
  background-color: #2222222d;
  box-sizing: border-box;
}

#sidebar > * {
  margin: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

There is more stuff in the code (js and css) like an other div used as a cursor to resize the sidebar but I want to keep it clear for now (I can show you more if needed).

Live example

will make a github page of my code if it’s needed

Screenshots

No response

Version

r169

Device

Desktop

Browser

Chrome

OS

Windows