Javascript 从中心展开div

我试图使一个圆圈div像谷歌材料设计一样可扩展，但有些东西不起作用。 我希望它展开并填充页面（从顶部0和右侧0），并保持在原位。但当宽度和高度增加时，div的中心会移动

我希望此模板上的搜索按钮具有相同的效果（最前面）：

这是我的代码：

$（'.expand'）。在（'click'，function（）上{
$（'.to展开'）.css({
“宽度”：“300px”，
“高度”：“300px”
})
})

html，
身体{
宽度：100%；
身高：100%；
}
.扩大{
位置：绝对位置；
边界半径：100%；
宽度：20px；
高度：20px；
排名：0；
背景色：红色；
右：0；
过渡：.5s；
}

扩大

也许你是从比例上看的：

$（'.expand'）。在（'click'，function（）上{
$（'.to expand'）.addClass（'scale'）；
})

html，
身体{
宽度：100%；
身高：100%；
}
.扩大{
位置：绝对位置；
边界半径：100%；
宽度：20px；
高度：20px；
排名：0；
背景色：红色；
右：0；
过渡：.5s；
}
.天平{
转换：比例（15）；
}

扩大

使用

变换：缩放（15）

而不是操纵

宽度

和

高度

$（'.expand'）。在（'click'，function（）上{
$（'.to展开'）.css({
“变换”：“比例（15）”
})
})

html，
身体{
宽度：100%；
身高：100%；
}
.扩大{
位置：绝对位置；
边界半径：100%；
宽度：20px；
高度：20px；
排名：0；
背景色：红色；
右：0；
过渡：.5s；
变换原点：中心；
}

扩大

$（'.expand'）。在（'click'，function（）上{
$（'.to expand'）.addClass（'expanded'）；
})

html，
身体{
宽度：100%；
身高：100%；
}
.扩大{
位置：绝对位置；
边界半径：100%；
宽度：20px；
高度：20px；
排名：0；
背景色：红色；
右：0；
过渡：.5s；
}
.扩大{
顶部：-100V最大值；
右：-100vmax；
宽度：250V最大；
高度：250V最大；
}

扩大

我试过了，但在我的div上有一些类似的例子：（谢谢你的回答！：）@Lucas，这样你就可以从scale开始，回到1；）总是有

会改变：transform

是，但是如果我想填充页面并从1px宽度和高度开始。我的规模将超过300。。我该怎么做才能驳回上诉（@Lucas你一开始把元素变成300px，然后用一个刻度把它变小，然后用刻度（1）把它变大：）是的，但它不是成比例的：/我在找一个完美的圆：（谢谢you@Lucas哦，好了，我换了班，现在是一个覆盖整个屏幕的完美圆圈