DOM元素居中展示

2021-07-23 14:56:05 字數 1253 閱讀 8811

在頁面開發過程中,經常遇到需要需要讓元素居中展示,並且需要適應各種解析度的情況,在此總結幾種常用的寫法,僅供叄考,實際情況靈活使用,不對之處還望不吝賜教。

適用於水平、垂直同時居中

1、相對於整個頁面

.dom-center

style>

class="dom-center"

style="position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -16px;">我要居中div>

2、相對於其它元素

.parent-dom

.dom-center

style>

class="parent-dom"

style="position: relative;">

class="dom-center"

style="position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -16px;">我要居中div>

div>

適用於水平居中

.parent-dom

.dom-center

style>

class="parent-dom">

style="padding-left:50%; ">

class="dom-center"

style="margin-left: -50px;">我要居中div>

div>

div>

適用於水平居中

.parent-dom

.dom-center

style>

class="parent-dom">

class="dom-center"

style="margin: 0 auto;">我要居中div>

div>

使用text-align,line-height可以分別實現水平,垂直居中

style="width: 400px; height: 200px; border: 1px solid #000000; text-align: center; line-height: 200px;">

我要居中

div>

DOM尺寸,DOM元素位置

dom尺寸 doctype html en utf 8 viewport content width device width,initial scale 1.0 document title utils.js script box style head box div 以乙個方向為例,每一種都有寬...

DOM元素屬性

用於處理 xml文件的 dom元素屬性 屬性名描述 childnodes 返回當前元素所有子元素的陣列 firstchild 返回當前元素的第乙個下級子元素 lastchild 返回當前元素的最後乙個子元素 nextsibling 返回緊跟在當前元素後面的元素 nodevalue 指定表示元素值的讀...

DOM元素尺寸

offsetleft 獲取的是相對于父物件的左邊距,相當於margin left,從本元素的最外面border到父元素的最內border left 獲取或設定相對於 具有定位屬性 position定義為relative 的父物件 的左邊距 如果父div的position定義為relative,子di...