將一個元素相對於另一個元素居中但從不離開屏幕

想象一下，我們有兩個元素。其中一個是容器，另一個是絕對定位的小部件（例如工具提示）。我中心一個下面的另一個使用這個CSS代碼：將一個元素相對於另一個元素居中但從不離開屏幕

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

.container可以在頁面上的任何地方和[************]代表的小部件。以上CSS的結果是：

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

然而，有一個問題，當.container靠近屏幕邊緣，因爲那時小部件的一部分被定位關閉屏幕和不可見：

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

我問題是：有沒有什麼聰明的方法可以確保這個元素永遠不會脫離屏幕沒有使用JavaScript？我只支持現代瀏覽器，使用calc或vw是好的。我可以自由修改HTML和CSS。 小部件具有固定的寬度。

預期結果在這種情況下：

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

你可以創建你有什麼到目前爲止小提琴？ –

如果小部件的寬度固定，則可以在容器周圍使用容器+小部件的寬度包裝第二個包裝，並確保它始終具有足夠的空間。缺點是，如果小部件應該漂浮在頁面中的其他元素上，這將不可能。這也將確保在容器位於頁面底部的情況下，小部件不會隱藏在頁面之外......如果您不想添加新元素，則可以使用容器的填充 –

我不認爲它是可能。如果支持[minmax（）]（https://developer.mozilla.org/en-US/docs/Web/CSS/minmax），則可以完成。但目前我看不到一個方法。 –

由於您只水平居中，可以使用以下方法來中心和包含的元素。

.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>

2017-02-08 22:25:49

這將不會工作，如果寬度' widget'大於'container'的寬度，情況就是如此（請參閱附加到原始帖子的小提琴）。 –

您可能可以將「最大寬度」屬性設置爲100％。現在不能嘗試。 –

回答