css绝对定位如何水平居中？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css绝对定位如何水平居中？相关的知识，希望对你有一定的参考价值。
position:absolute;
如果用left，top没法水平居中啊？该怎么办？
left的值 = （定位元素的父元素宽度 - 定位元素宽度）/2
如果该父元素是body可用screen.width,如果不是，请把该父元素设置成position:relative 参考技术A 需要一点小技巧,绝对定位没有水平居中的方法,但是left的值可以使用百分比,比如left:50%;但是这个50%是以div的左上角为基准的,所以要把div的位置在绝对定位之后再向左拉一部分
例子:
<html>
<head>
<title>Center</title>
<style>
div width:400px; height:400px; background:#f11; position:absolute; top:50%; left:50%; margin-left:-200px; margin-
top:-200px;
</style>
</head>
<body>
<div></div>
</body>
</html> 参考技术B
上面方法还得计算盒子宽度，这个不是最好的方法，一般开发中最好的自适应居中方法是这样的：
希望对你有帮助！
html
<div class="a">水平居中</div>
css
.a
width:100px;/*定义宽度*/
position:absolute;/*绝对定位*/；
left:50%;/*绝对定位到左侧中间位置*/；
margin-left:-50px;/*左移动本身宽度的1/2以保证绝对水平居中*/
参考技术D .box
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px; /*此处的负值是宽度的一半*/
绝对定位后怎样水平居中
参考技术A #xxxposition: absolute;
top: 50%;
left: 50%;
background-color: #AAA;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
就是 绝对定位50% 然后margin 负数为 宽高的一半 有个缺陷就是 宽高必须确定
还有一种 需要嵌套
<div id="xxx">
<div id="xxx2">
<div class="">
这里是 内容撑开的div
</div>
</div>
#xxx
position: absolute;
top: 50%;
left: 50%;
background-color: #AAA;
#xxx2
position: absolute;
top: -50%;
left: -50%;
background-color: #AAA;
可以参考下
全手打 望采纳本回答被提问者采纳
以上是关于css绝对定位如何水平居中？的主要内容，如果未能解决你的问题，请参考以下文章