css绝对定位如何居中？css绝对定位居中的4种完成方法

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

注意：这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

2、css3的出现，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样实现css绝对定位居中：

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}
3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)
.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}
4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。
本篇文章到这里就结束了，关于定位的更多内容可以参考css手册。
相关推荐：
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术_html/css_WEB-ITnose
css绝对定位居中技术优缺点图表详解
以上就是css绝对定位如何居中？css绝对定位居中的四种实现方法的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：css绝对定位如何居中？css绝对定位居中的4种完成办法