问答详情
源自：15-2 水平居中设置-定宽块状元素

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<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 11:47

个回答

  • 慕妹6273032
    2017-01-18 21:11:44

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

    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>

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

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


    0