为了账号安全,请及时绑定邮箱和手机立即绑定

如何让一个盒子上下左右居中的问题。

如何让一个盒子上下左右居中的问题。

行走的指尖 2017-08-08 14:16:32
我想到了两种CSS方法实现:1..box{margin:auto;position:absolute;left:0;right:0;bottom:0;top:0;width:200px;height:200px;}2..box{position:absolute;left:50%;right:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px;}测试后神奇的发现,第二种方法下,盒子值上下居中,不能左右居中,请问是什么问题造成的(页面中没有其他多余的样式,只加了box的样式,加了一个div标签)。
查看完整描述

2 回答

?
行走的指尖

TA贡献14条经验 获得超17个赞

啊,我知道问题了,非常感谢大家

查看完整回答
反对 回复 2017-08-09
?
脑袋空空空想家

TA贡献42条经验 获得超49个赞

position设置成为absolute以后,margin就会失效了。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ajax</title>

<style>

.a1{

width: 100px;

height: 100px;

position: absolute;

background-color: red;

top:0;

bottom: 0;

left: 0;

right: 0; 

margin: auto;

}

</style>

</head>

<body>

<div></div>

</body>

</html>


查看完整回答
反对 回复 2017-08-08
  • 2 回答
  • 0 关注
  • 3359 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信