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

首页课程实战体系课手记专栏慕课教程

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

来源：15-2 水平居中设置-定宽块状元素

慕粉4253983

2016-10-27 11:47

<!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>

写回答关注

3回答

慕妹6273032

2017-01-18 21:11:44

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

0 1

慕粉4282285: 2016-10-27 19:50:37

<!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>

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

5 0

慕粉4282... 回复Robert...

如果要自动化，只有通过js运算了，已经超出课程范围了

2016-12-14 00:02:43

共 5 条回复 >

慕粉4282285: 2016-10-27 14:08: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>

3 0

慕粉4282... 回复慕粉4253...

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

2016-10-27 17:54:59

共 3 条回复 >

初识HTML(5)+CSS(3)

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

1230042 学习 · 19084 问题

查看课程

相似问题

我想让两个div并列显示然后居中，为什么我设置了margin:10px auto却还是不能居中？

回答 6