如何使用CSS让HTML元素的中心点与页面中心对齐居中

解决方案 #

你想要的定位效果可以通过transform偏移实现，逻辑和你之前用到的transform操作类似，都是基于元素自身尺寸做调整，完全满足中心点对齐页面中心、宽度随内容自适应到上限的需求。

你原有代码的问题在于：设置的左右15%margin只有当元素宽度撑满70%时才会呈现居中效果，当内容不足时元素宽度小于70%，左侧固定15%边距就会导致元素整体偏左。

修改后的代码如下：

#associate {
    position:absolute;
    color:white;
    background-color:red;
    margin-top:55px; /* 可根据实际垂直位置需求决定是否保留，要垂直居中就删掉这行加top:50% */
    max-width:70%;
    width: fit-content; /* 确保元素宽度贴合内容，不会默认撑满可用宽度 */
    left: 50%; /* 元素左边缘对齐页面水平中心 */
    transform: translateX(-50%); /* 元素向左偏移自身宽度的50%，实现水平中心点重合 */
    /* 要同时垂直居中就加下面两行，删掉上面的margin-top */
    /* top: 50%;
    transform: translate(-50%, -50%); */
    text-align:center;
    padding:2.5%;
    max-height:17.5%;
    border-radius:25px;
    border-style:outset;
    border-color:white;
    border-width:5px;
}

该方案兼容性良好，IE9及以上主流浏览器都支持，不会影响你原有的其他样式效果，不管元素内容多少都能保持居中，宽度达到70%上限后会自动换行。

内容的提问来源于stack exchange，提问作者tv_dinner