水平居中对齐绝对对象

要将元素居中，只需将50%的值应用于top，margin-left left或margin-top，将-50%的值应用于translate.对于left和margin-left，您必须使用translateX(-50%)，而对于其他translateY(-50%). 编辑:添加了说明i have an element whose position is absolute the only issue i am facing is i have applied some properties to align it center horizontally and it is working fine on mozilla but the same properties are not working on chromehere's my codehtml<a href="#section1" class="scrollTo downarrow"><img src="images/navbar_downarrow.png" class="img-responsive"/></a>css .slider{ position: relative; background-image: url("../images/slider.jpg"); background-size: 100% 100%; background-repeat: no-repeat; } .slider a.downarrow{ position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 20px; display: table; } 解决方案 A useful trick to center elements is to use the transform: translate style together with either top, margin-left left or margin-top.To answer your question, you have to apply the following styles to your .slider a.downarrow element:left: 50%;transform: translateX(-50%);The way this works is because if translate is used with a percentage value, its value is calculated based on the elements height/width on which it is applied on.top, margin-left left and margin-top percentage values are calculated based on the parent element or in case the element has position: absolute applied to it based on the nearest parent with position: relative/absolute.To center an element you just need to apply a value of 50% to either top, margin-left left or margin-top and a value of -50% to translate.For left and margin-left you have to use translateX(-50%) and for the others translateY(-50%).EDIT: Added an explanation 这篇关于水平居中对齐绝对对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！