                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /初識(shí)HTML(5)+CSS(3)-升級(jí)版

為什么我設(shè)置定高，然后之間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

源自：初識(shí)HTML(5)+CSS(3)-升級(jí)版 15-2

關(guān)注問(wèn)題我要回答

2491

操作

收起

3 回答

慕妹6273032
2017-01-18

margin-top:?-200px;這個(gè)-200px是什么意思？

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕粉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>

不知道你還在不在，我做出來(lái)了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕粉4253983 提問(wèn)者

非常感謝??！

2016-10-28 回復(fù) 有任何疑惑可以回復(fù)我~

#2

Robert_Langdon

lz，這段代碼width，height設(shè)置成400px看上去是居中的，但你把它們?cè)O(shè)置成200px，你會(huì)發(fā)現(xiàn)垂直位置上它并不是居中的。

2016-12-11 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕粉4282285 回復(fù) Robert_Langdon

總寬高設(shè)置成200之后，對(duì)應(yīng)的margin-top和margin-left的值是-100px，永遠(yuǎn)是寬高一半的負(fù)數(shù)

2016-12-12 回復(fù) 有任何疑惑可以回復(fù)我~

查看2條回復(fù)

慕粉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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕粉4253983 提問(wèn)者

為啥呀

2016-10-27 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕粉4253983 提問(wèn)者

而且你這樣只是讓文本居中了呀，那個(gè)盒子還沒(méi)有居中

2016-10-27 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕粉4282285 回復(fù) 慕粉4253983 提問(wèn)者