                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

自己写了一段代码，发现这种方法好像并不居中，没发现问题在哪？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对位置</title>
<style>
#div1{
	border:1px solid red ;
	width:400px;
	height:400px;
	margin:0 100px;
	}
#div2{
	border:1px solid red ;
	width:100px;
	height:100px;
	float:left;
	position:relative;
	left:50%
	
	}
#div3{
	border:1px solid red ;
	width:50px;
	height:50px;
	position:relative;
	left:-50%
	}
</style>
</head>

<body>
<div id="div1">
	<div id="div2">
    	<div id="div3"></div>
    </div>
</div>
</body>
</html>

Dberglas

2016-07-28

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

316

操作

收起

3 回答

qq_云淡风轻_48
2016-08-04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对位置</title>
<style>
#div1{
    border:1px solid red ;
    width:400px;
    height:400px;
    margin:0 100px;
    }
#box1{
    float:left;
    position:relative;
    left:50%;
}
#div2{
    border:1px solid red ;
    width:100px;
    height:100px;
    position:relative;
    left:-50%
    }
#box2{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
#div3{
    border:1px solid red ;
    width:50px;
    height:50px;
    position:relative;
    left:-50%
    }
</style>
</head>

<body>
<div id="div1">
    <div id="box1">
        <div id="div2">
            <div id="box2">
                <div id="div3"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

不知道你是不是想要这种效果，希望对你有帮助

0 回复有任何疑惑可以回复我~

收起回答

qq_云淡风轻_48

我这是相对上一层的居中，如果想要对浏览器居中还需要在最外面再套一个盒子

2016-08-04 回复有任何疑惑可以回复我~

qq_云淡风轻_48

还有你这是定宽的块元素，可以直接用margin取值auto

2016-08-04 回复有任何疑惑可以回复我~

Dberglas 提问者回复 qq_云淡风轻_48

是的，那时候提问的，后来再看一遍教程就明白了，只是不熟悉的原因

2016-08-06 回复有任何疑惑可以回复我~

春秋齐小白
2016-07-29

题主没有陈述清所问的问题（想要什么效果？到底是要谁相对于谁居中？），目前有一个简单的修改可以使div3相对于div1居中，修改如下:有一个错误，对于div3的left：-50%，所引用的是div2宽度的50%，也就是50px而非25px。如果想要别的效果的话我们可以一起探讨一下。（ps：回复请点击答案右下角的回复按钮。）

0 回复有任何疑惑可以回复我~

收起回答

悦溪
2016-07-28

<head>

<style>

#div1{

border:1px solid red ;

width:400px;

height:400px;

margin:0 100px;

position:relative;

}

#div2{

border:1px solid red ;

width:100px;

height:100px;

margin-left:auto;

margin-right:auto;

}

#div3{

border:1px solid red ;

width:50px;

height:50px;

margin-left:auto;

margin-right:auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

Dberglas 提问者

你这种思路能够居中，但是思路和教程里不一样。假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。没搞明白后两句话为什么这么写

2016-07-28 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226967 人
解答问题 18247 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

1 回答自己试着玩发现的一个问题

2 回答问题没有发现

1 回答问下自己写的代码问题

2 回答发现不用写在form里也行

6 回答刚开始学前段开发的小白请问如果自己敲代码的话是在哪个软件当中进行

搜索更多本课相关问答

自己写了一段代码，发现这种方法好像并不居中，没发现问题在哪？

我要回答关注问题

热搜

最近搜索清空

自己写了一段代码，发现这种方法好像并不居中，没发现问题在哪？

3 回答

本课相似问答

自己写了一段代码，发现这种方法好像并不居中，没发现问题在哪？