带有absolute的DIV层居中问题请教

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有absolute的DIV层居中问题请教相关的知识,希望对你有一定的参考价值。

子DIV有absolute,我想所有的DIV可以自动居中排列显示
==================================================
<div id="container">
<!-- displays the sec 1-1=1-9-->
<div style="position:absolute;top:30px;left:10px;">
<a class="groupc"href="Images\PupImages\1-1.jpg" title="on the integration and promotion of broad link oriental cultural broadcast"><IMG class=fade style="BACKGROUND: url(Images/indexImages/index1-1.jpg)" src="Images/indexImages/index1-1r.jpg"></a>
<div style="position:absolute;top:30px;left:147px;" class='temphol'>
<a class="iframe" href="Images\pup1-1.html"><img src='Images/indexImages/indexg1-1r.jpg' alt='Loading' border='0'></a> <img src='Images/indexImages/indexg1-1.jpg' class='front' alt='' border='0'>
</div>

<div style="position:absolute;top:30px;left:284px;">
<a href="#"><IMG class=fade style="BACKGROUND: url(Images/indexImages/index1-2.jpg)" src="Images/indexImages/index1-2r.jpg"></a>
</div>

<div style="position:absolute;top:30px;left:421px;">
<a class="group2" href="Images\PupImages\address.jpg" title="22222222--- Tel:(86)2222222 Fax:(86)22222222"><IMG class=fade style="BACKGROUND: url(Images/indexImages/indexg1-2r.jpg)" src="Images/indexImages/indexg1-2.jpg"></a>
</div>
</div>

</div>
好像可以把BODY作为一个父DIV,不知道怎么做

如果你使用了绝对定位。好像就无法控制居中了!
你可以把所有的绝对定位取消。然后把你的最外层Div也就是你的container设置居中。
如:
#container

margin:0px auto;
width:900px;

这样包含在container中的所有Div都能居中显示了。这里是必须得指定宽度的。因为div是自适应宽度的。
参考技术A 你可以在父DIV上加一个position:relative,这样你的子DIV就是先对于父DIV的定位,然后再设置父DIV居中,这样父DIV就可以居中,而子DIV就是按照你的定位分布,如果想子DIV居中的话,那应该就不能用定位了 参考技术B absolute 绝对定位了,怎么居中? 每个人浏览你网页时的屏幕分辨率是不同的……

把目前的absolute删除掉……然后,
在页面所有内容外面套一个div标签
<div id="content">……</div>

CSS里面添一句:
#content
margin: 0px auto;


这样就能居中了。
参考技术C left:50%; top:50%
这样调整一下,虽然不能很准确的居中,但也差不多完成任务了
参考技术D 到底是把 <div id="container"> 对 BODY 置中呢?还是把 <div style="position:absolute......"> 全部居中呢?

关于一个div上下左右居中的css方法

1:通过position:absolute定位,上下左右的值都设为0,margin:auto;需要知道div的宽高

{
width: 64px;
height: 64px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高度的一般即可实现;

{

width: 64px;
height: 64px;
border: 1px solid red;
background-image: url(img/g2.gif);
background-size:100% 100% ;
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;

}

3 未知div的宽高。由div的内容撑起来

{

border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

 

以上是关于带有absolute的DIV层居中问题请教的主要内容,如果未能解决你的问题,请参考以下文章

DIV层居中

如何将一个设置为absolute的div居中对齐

请问svg和div的穿透如何分开 请教 因为不知道可否将svg和div层分出上下层的直接方法?

如何实现div的上下左右都居中?

元素定位后如何居中

div在设置position为absolute的情况下 如何让里面的内容水平居中显示