div中的div如何居中

2022-06-23 19:33:07 字數 1221 閱讀 3857

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>

title

>

<

style

type

="text/css"

>

style

>

head

>

<

body

>

<

div

class

="father"

>

<

div

class

="son"

>son

div>

div>

body

>

html

>

方法一(使用絕對佈局): 這種方式的弊端是:必須要知道這個容器的長寬,因為在子元素中的    margin-top:-100px;    margin-left:-100px; 這兩個樣式分別是子元素長、寬的一半。

.father .son

方法二:仍然是絕對佈局,讓left和top都是50%,這在水平方向上讓div的最左與螢幕的最左相距50%,垂直方向上一樣,所以再用transform向左(上)平移它自己寬度(高度)的50%,也就達到居中效果了,效果圖和上方相同。//這種方式很好的避免了方式一的弊端,不需要知道自己的長寬,一樣可以定位到中間。

.father.son

方法三(使用彈性佈局flex)://這種方式比較通用:這樣給父元素設定了三個樣式display:flex;(彈性佈局)    justify-content:center;(內容水平居中)   align-items:center; (內容垂直居中) 就可以達到水平、垂直居中的效果。

.father .son

方法四(使用絕對佈局)://使用這種方式的要領是:子絕父相,且子元素要設定以下的樣式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以達到居中效果。

.father .son

DIV居中之div水平居中 讓DIV佈局居中

div 居中之div水平居中 讓div佈局居中篇 如何讓div居中呢?如何讓div盒子水平居中呢?本節divcss5讓大家實現div佈局水平...

DIV 居中

div class container div div水平居中 設定margin的左右邊距為自動div水平居中 container div垂...

div 居中

12 34 divclass mask divclass content br 我是要居中的板塊 12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 27 mask center 效果 這種居中方式,把內部div設定寬高之後,再設定top le...