如果沒有絕對定位
，只需要設定margin：
0 auto
就可以是盒子實現
水平垂直居中
。但是如果設定了絕對定位，margin：
0 auto
就沒有效果了，那此時又該怎麼實現呢？
先來看乙個例子，實現如下圖的效果，「多 品類齊全輕鬆購物」，「快 多倉直髮，極速配送」，「好 **行貨 精緻服務」，「省 天天低價 暢選無憂」分別是由4
張組成的。如何讓著
4張按下圖顯示呢？
html**：
在最外層設定乙個div
，在div裡面設定4個
span
，每個span
裡面放置
img標籤。來放置4張
css**
.slogen
.slogen1{
margin-left: -608px;
.slogen2{
margin-left: -304px;
.slogen3{
margin-left: 2px;
.slogen4{
margin-left: 304px;
這裡我們需要對span設定絕對定位，根據子絕父相，對
span
的父元素
div設定相對定位，並設定
div的高度，背景顏色，邊框。4個
span
有共同的樣式，這裡設定了公共類
item
包括寬度，絕對定位，向上距離
20px,
left
設定為50%。
盒子是以中間的為界
居中，通過設定margin-left確定的位置。那麼左側的
margin-left
為負值。我們從左至右將編號為1，
2，3，
4.每張之間設定
2px間距，
1需要設定
margin-left
為父元素寬度的2倍即是
-604px
，加上間距
2*2，即為
-608px
。同理2
需要設定
margin-left
為父元素寬度，加上間距，即為-304px;右側
margin-left
為正值。3設定
margin-left為間距 2px; 4設定margin-left:為父元素寬度，加上間距2px, 即為304px;
利用絕對定位實現水平垂直居中
a.b style head class a class b div div body 重點講一下對子div b中css的理解 1.margin auto實現居中的原理 自動分配剩餘空間。眾所周知，僅僅使用margin 0 auto就可以將塊級元素水平居中，但是為什麼垂直水平居中不能單純的使用mar...
如何實現盒子水平垂直居中？
1.transforms屬性的translate平移 position設定 子絕父相 transform translate 50 50 top 50 left 50 2.margin position設定 子絕父相 在父元素設定 margin 0 auto 在子元素設定 left 50 top 5...
如何實現子盒子在父盒子中水平垂直居中
效果如下 結構 1.方法一 採用彈性盒子 css father child 2.方法二 利用父盒子 table cell 子盒子 inline block css father child 3.方法三 定位 位移 css father child 4.方法四 定位 子盒子左邊距 上邊距的一半 css...