                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

2498

操作

收起

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 提問者

非常感謝?。?/div>

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 回復有任何疑惑可以回復我~