2-12编程练习 关于块级元素居中问题
<!DOCTYPE html>
<html>
<head>
<title>2-12</title>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
.header{width:100%;background:#000;overflow:hidden;}
.logo{margin-left:20px;float:left;}
.nav{float:right;}
.nav ul li{width:100px;float:left;margin-right:20px;text-align:center;line-height:100px;color:#fff;font-size:20px;}
.container{width:100%;height:800px;background:#67b581;overflow:hidden;}
.left{width:30%;height:100%;float:left;position:relative;}
.left-content{position:absolute;top:50%;left:50%;margin-top:-50%;margin-left:-15%;border:3px solid green}
.left-content p{margin-top:10px;}
.left-content p span{background:pink;margin-right:15px;}
.middle{width:30%;height:100%;float:left;position:relative;}
.middle-content{position:absolute;top:50%;left:50%;margin-top:-50%;margin-left:-15%;border:3px solid blue}
.middle-content p{margin-top:10px;}
.middle-content p span{margin-right:15px;}
.right{width:39%;height:100%;float:left;border-left:5px solid orange;position:relative;}
.right-content{position:absolute;top:50%;right:50%;margin-top:-39%;margin-left:-19%;border:3px solid red;}
input{width:200px;height:30px;margin-top:10px;}
.input-1{background:red;}
.footer{width:100%;height:auto;background:#000;}
.foot-nav{width:900px;margin:0px auto;overflow:hidden;}
.foot-nav ul li{float:left;width:100px;margin-right:15px;text-align:center;line-height:100px;font-size:20px;color:#fff;}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="left">
<div class="left-content">
<h2>课程推荐</h2>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Android语法与界面</p>
<p><span>职业路径</span>IOS基础语法与常用控件</p>
<p><span>职业路径</span>入门开发</p>
</div>
</div>
<div class="middle">
<div class="middle-content">
<h2>相关课程</h2>
<p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
<p><span>HTML5</span><span>CSS3</span><span>Jquer</span></p>
<p><span>移动端基础</span><span>移动端APP开发</span></p>
</div>
</div>
<div class="right">
<div class="right-content">
<h2>登陆</h2>
<p><input type="text" name="username" placeholder="请输入登陆邮箱/手机号"></p>
<p><input type="password" name="password" placeholder="请输入登陆密码"></p>
<p><input class="input-1" type="submit" name="submit" value="提交"></p>
</div>
</div>
</div>
<div class="footer">
<div class="foot-nav">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>我想问一下块级元素居中问题，我得代码中.left-content，.middle-content，.right-content。
left-content和middle-content部分块级元素也就是绿色和蓝色我用absolute定位的时候.
margin-top和margin-left都是width和height的一半就可以定位了.
而到了right-content的块级元素也就是红色的内容部分时候,我设置了margin-left是width的一半，也就是约等于19%无法让红色的部分居中，但是设置了39%就可以，请帮忙看一下。谢谢
0
收起
正在回答
1回答
你好同学,
测试了你的代码,发现绿色部分和蓝色部分并没有实现水平居中显示,如下图所示:
想要实现居中效果,需要在子元素设置绝对定位,父元素设置相对定位,然后left:50%,就要margin-left:回退一半的宽度,这样就能水平居中了,垂直居中实现方法一样,
具体的实现方式如果还不会的话建议在看一下《网页布局案例》这个课程，课程中老师已经详细的讲过关于居中定位的问题，建议多听锻炼。
以下截图均为实现水平居中显示的代码,垂直居中需要自己进行计算数值修改:
祝学习愉快!
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星