将一个元素相对于另一个元素居中但从不离开屏幕

Question

想象一下，我们有两个要素。其中一个是容器，另一个是绝对定位的小部件（例如工具提示）。我使用这个CSS代码将一个放在另一个下面：

.container {
    position: relative;
}
.widget {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

.container可以位于页面的任意位置，[************]代表小部件。 CSS上面的结果如下：

|    [.container]   |
|   [************]  |

然而，当.container靠近屏幕边缘时会出现问题，因为部件小部件位于屏幕外且不可见：

|[.container]       |
|************]      |

我的问题是：是否有任何聪明的方法可以确保此元素永远不会在屏幕上显示不使用JavaScript ？我只支持现代浏览器，使用calc或vw很好。我可以自由修改HTML和CSS。 小部件具有固定宽度。

在这种情况下的预期结果：

|[.container]       |
|[************]     |

解决问题：https://jsfiddle.net/5xdhhh8f/1/

Answer 1

由于您只是水平居中，因此可以使用以下内容居中并包含元素。

.container{
  text-align:center;
 }

.widget{
  display:table;
  margin:0 auto;
  border:1px solid #000;
}

<div class="container">
  SOME TEXT
  <div class="widget">SOME WIDGET</div>
</div>