HTML:塊元素位置居中

時間 2019-12-10

標籤 html 元素位置居中欄目 HTML 简体版

原文原文鏈接

塊元素位置居中有兩種存在：css

一種是有兩個塊元素，其中一個塊元素相對另一個塊元素居中；
另一種是一個塊元素相對於頂級父容器居中

第一種實現方式以下：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以及這個屬性的值的各類含義
spa

定義：code

osition 屬性規定元素的定位類型。htm

說明

這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。blog

值	描述
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 屬性的值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。