My goal is to perfectly center an HTML element on a page, ensuring that the center of the element aligns with the center of the page.
The current code I am using is as follows:
#associate {
position:absolute;
color:white;
background-color:red;
margin-top:55px;
margin-left:15%;
margin-right:15%;
max-width:70%;
text-align:center;
padding:2.5%;
max-height:17.5%;
border-radius:25px;
border-style:outset;
border-color:white;
border-width:5px;
}
When the content inside the element exceeds the max-width:70%;, it centers perfectly on the page. However, if the content falls short of this width limit, the element shifts to the left with a 15% margin.
In a previous project where I needed to rotate an element, I could specify the rotation point with:
transform-origin:0% 50%;
transform:rotate(90deg);
Is there a similar method to define the central point of an element so that it aligns with the center of the page? I aim to place the center of the element at the center of the page and allow the sides to expand as needed to accommodate more text until reaching the max-width:70%;.