html 5 里外结构布局可以将 容器置身于整个页面的中央

原创
2016/10/10 18:34
阅读数 33

<head>

        <meta charset="utf-8" />

        <title></title>

<!--内部样式等同于cass文件-->

        <style>

            #parent

            {

            width: 200px;

            height: 200px;

            background-color: burlywood;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            }

            #child

            {

/*方法一:绝对定位position:absolute+left根据整个页面定位position: relative:相对定位根据容器 */

/*方法二:下面四行代码全上表示相对定位/*/

           1: position: relative;

          2:  top: 50%;

          3:left: 50%;

          4:  transform: translate(-50%,-50%);

            

            width: 100px;

            height: 100px;

            background-color: cadetblue;

            /*透明度*/

            opacity:0.5 ;    

            }

        </style>

    </head>

    <body>

        <div id="parent">

            <div id="child"></div>

        </div>

    </body>

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部