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

为什么我设置定高，然后之间margin: auto; 不能使它上下左右都居中呢？

<!DOCTYPE HTML>

<html>

<head>

<title>定宽块状元素水平居中</title>

<style>

div{

border:1px solid red;

width:200px;

height:200px;

margin:auto;

}

</style>

</head>

<body>

<div>我是定宽块状元素，我要水平居中显示。</div>

</body>

</html>

慕粉4253983

2016-10-27

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

关注问题我要回答

2446

操作

收起

3 回答

慕妹6273032
2017-01-18

margin-top: -200px;这个-200px是什么意思？

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

收起回答

慕粉4282285
2016-10-27

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div {
    width: 400px;
    height: 400px;
    line-height: 400px;
    border: 1px solid #006699;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    text-align: center;
}
</style>
</head>
 
<body>

<div>我是定宽块状元素，我要水平居中显示。</div>
 
</body>
</html>

不知道你还在不在，我做出来了

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

收起回答

慕粉4253983 提问者

非常感谢！！

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

Robert_Langdon

lz，这段代码width，height设置成400px看上去是居中的，但你把它们设置成200px，你会发现垂直位置上它并不是居中的。

2016-12-11 回复有任何疑惑可以回复我~

慕粉4282285 回复 Robert_Langdon

总宽高设置成200之后，对应的margin-top和margin-left的值是-100px，永远是宽高一半的负数

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

查看2条回复

慕粉4282285
2016-10-27

给div加table/tr/td，别忘了把选择器也改成table，其它什么也不用改

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
table{
    border:1px solid red;
    width:200px;
    height:200px;
    margin:auto;
}
</style>
</head>

<body>
<table><th><td>
<div>我是定宽块状元素，我要水平居中显示。</div>
</td></th></table>

</body>
</html>

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

收起回答

慕粉4253983 提问者

为啥呀

2016-10-27 回复有任何疑惑可以回复我~

慕粉4253983 提问者

而且你这样只是让文本居中了呀，那个盒子还没有居中

2016-10-27 回复有任何疑惑可以回复我~

慕粉4282285 回复慕粉4253983 提问者

你盒子要相对于什么居中？页面可以无限下拉，你到哪儿才算居中？没有意义的这个问题

2016-10-27 回复有任何疑惑可以回复我~