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

来源:15-1 水平居中设置-行内元素

豪大丶

2018-11-15 17:52

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


写回答 关注

2回答

  • 慕瓜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;

    }

    这样就可以

    三水梅林

    最后一行代码有什么讲究吗

    2018-12-12 08:54:15

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

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

1223090 学习 · 18212 问题

查看课程

相似问题