问答详情
源自:15-1 水平居中设置-行内元素

求教如何设置让#box1居中显示啊

<!DOCTYPE html>

<html>

<head>

<title>hello world</title>

<style type="text/css">

h1{color:red;

font-size:18px}

div{

border:2px dotted red;

}

#box1{

width: 300px;

height: 300px;

background: #245;

position:relative;

}

#box2{

position:absolute;

top:20px;

right: 18px;

}

#box3{

position: absolute;

bottom: 10px;

left:18px;

}

</style>

</head>

<body>

<div id="box1">

<div id="box2">居中的标题</div>

<div id="box3">正文</div>

</div>

<h1>hello world</h1>

</body>

</html>


提问者:豪大丶 2018-11-15 17:52

个回答

  • 慕瓜2002549
    2019-02-21 11:04:27

    如果要正中居中:

    #box1{
    width: 300px;
    height: 300px;
    background: #245;
    position:absolute;
    margin:auto;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    }

  • weixin_慕尼黑2128983
    2018-11-15 21:36:01

    #box1{

    width: 300px;

    height: 300px;

    background: #245;

    position:relative;

    margin:0 auto;

    }

    这样就可以