位置的中心點，而不是左上點

是否有可能通過一個元素的中心點告訴代碼位置，而不是由左上點？如果我父元素有位置的中心點，而不是左上點

width: 500px;

和我孩子元素具有

/*some width, for this example let's say it's 200px*/ 
position: absolute; 
left: 50%;

人會認爲，基於50%定位，子元素將在父的中間，在每邊留下可用空間的150px。然而，它不是，因爲它是去父母的寬度50%孩子的左上角點，因此中200px整個兒的寬度去從那裏正確的，留下的自由空間250px在左側，只50px在右邊。

所以，我的問題是，如何實現中心定位？

我發現這個解決方案：

position: absolute; 
width: 200px; 
left: 50%; 
margin-left: -100px;

而是因爲你需要手動編輯每個元素的寬度，我不喜歡它 - 我想的東西，在全球的作品。（例如，當我在Adobe After Effects中工作時，可以爲對象設置一個位置，然後設置該對象的特定錨點將放置到該位置。如果畫布的寬度爲1280px，則位置其目的在於640px和你選擇的對象的中心是你的定位點，那麼整個對象將1280px寬畫布中居中）

我會想象這樣的事情在CSS：

position: absolute; 
left: 50%; 
horizontal-anchor: center;

同樣，horizontal-anchor: right將定位元件b在它的右側，所以整個內容將從其父母的寬度50%左側開始。

而且，同樣也適用於vertical-anchor，你得到它。

所以，是這樣的可能使用只有CSS（無腳本）？

謝謝！

來源

2013-03-10 kaboom1

如果元素必須絕對定位（所以，margin: 0 auto;是沒有用的定心）和腳本是出了問題，你可以通過CSS3轉換來實現這一點。

.centered-block { 
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute; 
}

對於一些示例，看到這個fiddle。重要的部分：left: 50%;將父母的一半推上父母（所以你的左邊是50％的分數，就像你提到的那樣）。 transform: translate(-50%, 0);將塊的一半拉回自己的寬度沿着x軸向後（即向左），這會將它放置在父級的中心位置。

請注意，這不太可能是跨瀏覽器兼容的，並且仍舊需要對舊瀏覽器進行某種回退。

來源

2013-03-10 23:05:05 John

@ kaboom1用戶注意：瀏覽器特定的命令應該被徹底測試。好消息是，每個瀏覽器通常具有相同的屬性。 – 2014-04-21 13:02:00

好的解決方案，但至少現在*是*一定數量的跨瀏覽器兼容性;只需使用相同的值添加「-ms-transform」和「transform」鍵即可。 – Raphael 2016-05-23 16:09:17

左：50％不居中的這一重心div的50％到左側，這是左邊框的父元素的左邊框之間的距離，所以基本上你需要做一些計算。

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ] 

left = left/2

所以，你可以做一個JavaScript函數...

function Position(var parentWidth, var childWith, var borderWidth) 
{ 
     //Example parentWidth = 400, childWidth = 200, borderWidth = 1 
     var left = (parentWidth - (childWidth + borderWidth)); 
     left = left/2; 
     document.getElementById("myDiv").style.left= left+"px"; 
}

來源

2013-03-10 22:45:45

謝謝，我知道這會工作，但你否認了我所要求的唯一兩件事 - 無需爲每個元素的寬度手動調整它，並且不需要腳本，只需CSS即可。 – kaboom1 2013-03-10 22:58:20

如果添加其他元素是一種選擇，考慮以下因素：

（View the following code live here）

HTML：

<div class="anchor" id="el1"> 
    <div class="object"> 
    </div> 
</div> 
<div class="anchor" id="el2"> 
    <div class="object"> 
    </div> 
</div>

CSS：

/* CSS for all objects */ 

div.object 
{ 
    width:    100%; 
    height:    100%; 
    position:   absolute; 
    left:    -50%; 
    top:     -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */ 
} 

div.anchor 
{ 
    position:   absolute; /* (or relative, never static) */ 
} 


/* CSS for specific objects */ 

div#el1 
{ 
    /* any positioning and dimensioning properties for element 1 should go here */ 
    left:    100px; 
    top:     300px; 
    width:    200px; 
    height:    200px; 
} 

div#el2 
{ 
    /* any positioning and dimensioning properties for element 2 should go here */ 
    left:    400px; 
    top:     500px; 
    width:    100px; 
    height:    100px; 
} 

div#el1 > div.object 
{ 
    /* all other properties for element 1 should go here */ 
    background-color: purple; 
} 

div#el2 > div.object 
{ 
    /* all other properties for element 2 should go here */ 
    background-color: orange; 
}

本質上，我們要做的是設置一個對象來定義元素的位置，寬度和高度，然後在其中放置另一個偏移50％的對象，並獲取其父維度（即width: 100%）。

來源

2014-04-21 13:24:37

在這個問題上發生了一些問題，我想添加另一種方式來將內容集中在div中。

通過使用CSS3顯示模式「靈活的盒子」，如下面的CSS屬性設置爲父DIV

display: flex; 
position: relative; 
align-items: center; 
justify-content:center;

而且「至少」設置以下屬性，對孩子的div

position:relative;

瀏覽器會自動將內容居中放在父div中，不受其寬度或高度的影響，當您開發類似圖像網格的東西或只是想要消除計算divs位置的麻煩時，然後h當您改變對所述div的設置時想重新計算它。

在我自己的工作，我傾向於建立一個名爲

.center-center

隨着我父DIV中描述的屬性的類，然後只需將其添加到任何元素，而我需要它的內容居中。

我已經創建了一個JSFiddle來支持這個解釋，隨時點擊紅色的方塊來查看定位。

https://jsfiddle.net/f1Lfqrfs/

對於多線支撐，可以在下面的CSS屬性添加（或JSF取消註釋）父DIV

flex-wrap: wrap;

來源

2017-04-26 07:52:27

位置的中心點，而不是左上點

回答

相關問題