HTML:块元素位置居中

最新推荐文章于 2022-04-11 19:56:02 发布

alex_wen2014

最新推荐文章于 2022-04-11 19:56:02 发布

阅读量1.7k

点赞数

原文链接：http://www.cnblogs.com/lyd447113735/p/9767088.html

版权

块元素位置居中有两种存在：

一种是有两个块元素，其中一个块元素相对另外一个块元素居中；
另外一种是一个块元素相对于顶级父容器居中

第一种实现方式如下：

<html>

<head>
    <meta charset="utf-8" />
    <title>测试</title>

    <style type="text/css">
        .aa {
            width: 500px;
            height: 500px;
            background-color: #00FFFF;
            /*设置当前块元素生成绝对定位的元素，相对于浏览器窗口进行定位。*/
            position: fixed;
            top: 50%;
            left: 50%;
            /*将块元素定位好位置后减去自身的长和宽*/
            margin-left: -250px;
            margin-top: -250px;
        }
    </style>

</head>


<body>

    <div class="aa"></div>

</body>


</html>

效果图：

第二种实现方法如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单标签</title>

    <style type="text/css">
        .aa {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: antiquewhite;
        }

        .bb {
            width: 50px;
            height: 50px;
            background-color: #00FFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
</head>


<body>



    <div class="aa">

        <div class="bb"></div>

    </div>


</body>

</html>

实现效果：

在这里顺便记录一下上面个代码用到的一个属性position以及这个属性的值的各种含义

定义：

osition 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。