老师请看这三个方法是否正确
来源：2-5 编程练习
宝慕林4199460
2019-04-30 12:30:21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
.box{
width: 500px;
height: 200px;
margin:0 auto;
border:1px solid #aaa;
background-color: #ababab;
color: #fff;
font-weight: bolder;
position: relative;
}
.box div{
width: 200px;
height: 40px;
font-size: 16px;
text-align: center;
position: absolute;
/*top: 100px;
margin-top: -20px;
left: 250px;
margin-left: -100px;方法一*/
/*top:80px;
left:150px;方法二*/
top:50%;
margin-top:-20px;
left:50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div>
欢迎大家来到慕课网学习！
来到慕课网学习!
</div>
</div>
</body>
</html>写回答
1回答
-
你好同学，虽然三种方式在这里都实现了居中。但是推荐使用第三种，如下方式更好：
因为前两种做法都是要参考父元素的宽高。拿第二种方式举例子，因为父元素宽度设置500px ,所以子元素设置left:250px为父元素宽度的一半。假如父元素宽度变化，left的值就要重新计算。这样就很麻烦了。而设置left:50%.不管父元素宽度如何，50%永远是父元素的一半哦
祝学习愉快 ，望采纳。
2
相似问题