me he encontrado un pequeño problemilla al intentar centrar de la misma manera los dos circulos: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> document.getElementsByTagName("p")[0].style.marginLeft=getComputedStyle(document.getElementsByTagName("div")[0]).width; document.getElementsByTagName("p")[0].style.marginTop=getComputedStyle(document.getElementsByTagName("div")[0]).height; //Como se puede apreciar el circulo no queda perfectamente centrado entre las lineas de al lado y de arriba como si lo hace el otro circulo <!-- language: lang-css --> div{ background: grey; height: 100px; width: 100px; position: absolute; background-color: #b6b6af; outline:5px dashed #BCBCBC; outline-offset: 5px; } #derecha{ position: absolute; float: right; width: 20px; height: 20px; border-radius: 50%; background-color: #cccccc; } #izquierda{ position: absolute; bottom: 0px; float: left; width: 20px; height: 20px; border-radius: 50%; background-color: #cccccc; margin: -18px; } <!-- language: lang-html --> <div> <p id="derecha"></p> <p id="izquierda"></p> </div> <!-- end snippet --> Se que una solución puede ser restarle un 1px en las dos líneas de JS, pero lo veo poco dinámico ya que si la pantalla se hace más pequeña no cuadrara siempre. Se les ocurre alguna otra idea? Muchas gracias!