How to center dropdown based on size of parent - html

Question

I have a dropdown-component that when you click the button and dropdown is shown.
I want the triangle on the dropdown to always point to the center of the button that opened it regardless of how big it was.
Is this possible using css?
In the example below I am using a css-variable to achieve this. But in my real scenario I am unable to do this since the width of the container/button is decided by its contents.
Is it possible to reference the width of the container in any other way? I see that percentages used in left-positioning and the transform is based on the width of the menu it self. So that doesn't really help.
body {
margin: 2rem 50%;
--button-size: 100px;
}
.container {
position: absolute;
display: inline-block;
}
.button {
position: relative;
width: var(--button-size);
border: 1px solid black;
}
.button:after {
display: block;
position: absolute;
content: "";
width: 1px;
height: 200%;
top: 0;
left: 50%;
transform: translateX(-50%);
background: red;
}
.item {
white-space: pre;
padding: 1rem;
}
.item + .item {
border-top: 1px solid black;
}
.menu {
padding: 0;
list-style: none;
position: absolute;
border-radius: 4px;
border: 1px solid black;
left: 100%;
transform: translateX(calc(-75% - var(--button-size)/2));
}
.menu:after,
.menu:before {
content: "";
position: absolute;
left: 75%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px;
border-color: transparent;
}
.menu:before {
border-bottom-color: black;
top: -17px;
}
.menu:after {
border-bottom-color: white;
top: -16px;
}
<div class="container">
<div class="button">Centered on me(but using css-variables)</div>
<ul class="menu">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>

Answer 1

I think using a margin: auto; on the element that you want in the center could be useful as it automatically adjusts and places it's element in the center depending on the space available to it in any given situation.