Javascript 如何使css左右响应？

我正在努力使我的模态响应。 我目前正在css中使用“right:405px”使我的模态粘贴在正确的部分。 但是，随着浏览器屏幕大小的变化，模式保持的位置也会发生变化，这意味着这是不响应的。 在所附的屏幕截图中，单击“信息图标”时，您可以看到“谷歌翻译器模式”。 有人能帮我写一个响应CSS代码吗

多谢各位

.google翻译模式{
位置：绝对位置；
背景：#fff；
z指数：10000；
右：405px；
顶部：40px；
宽度：230px；
高度：50px；
边界半径：3px；
}

技术支持

这是一个粗略的示例，但最终归结为将绝对定位元素放置在相对定位元素的内部，并将其悬停显示

我已经将“模态”（我称之为工具提示）放置在似乎触发其外观的元素内部。通过将工具提示放置在触发它的元素的内部和相对位置，我们不必担心距视口边缘有多远。在我的示例中，工具提示始终是相对于图标的位置

.translate{
浮动：对；
保证金：0.1.5雷姆；
}
.翻译图标{
位置：相对位置；
光标：指针；
字体大小：1.5rem；
}
.translate图标：悬停。翻译工具提示{
显示：块；
} 
.翻译工具提示{
显示：无；
位置：绝对位置；
底部：-1.75雷姆；
权利：-0.35雷姆；
宽度：13雷姆；
文本对齐：居中；
字号：1rem；
边框：1px纯色灰色；
}
.translate工具提示：：之前，
.translate工具提示：：之后{
内容：''；
位置：绝对位置；
底部：100%；
右：0.25雷姆；
宽度：0；
身高：0；
边框：实心透明；
}
.translate工具提示：：之前{
边框底色：灰色；
边框宽度：9px；
}
.translate工具提示：：之后{
边框底色：白色；
边框宽度：8px；
右图：计算值（0.25rem+1px）；
}

选择语言
&ω；
由谷歌翻译提供动力

使用percentages@j08691我尝试使用百分比，但它没有响应。@mohade在css代码中添加“margin:0 auto”不起作用。我提交了一个答案，但刚刚意识到您可能不希望它水平居中-您能确认它在设备上显示的位置吗？我不能100%确定什么是响应的，什么不是响应的在这里回答“不起作用”不是可采取行动的反馈。我也不完全确定预期的结果应该是什么。你能澄清一下吗。