Me he encontrado un pequeño problemilla al intentar centrar de la misma manera los dos circulos:
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
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;
}
<div>
<p id="derecha"></p>
<p id="izquierda"></p>
</div>
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!