在任何時候都將交叉線上絕對定位的div居中？

我想定位一個在每個頁面/屏幕上都有絕對位置的div。在任何時候都將交叉線上絕對定位的div居中？

這個div是一個圓形的形狀，它需要居中對齊黑色線條，所以圓心位於交叉線的中心。

我希望這是有道理的。

證明這一點，我創建了這個小提琴：

當我減少或增加我的瀏覽器的大小，圓格不居中了，我不知道如何實現我是什麼試圖做！

我的CSS是這樣的：

.circle { 
    display: block; 
    width: 110px; 
    height: 110px; 
    /*margin: 1em auto;*/ 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 5px solid #eee; 
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
    background-color:#FFF; 
} 

.baners{ 
    width: 50%; 
    height: 76vw; 
    border:solid 1px #333; 
    display:inline-block; 
    background:#FFF; 
    box-sizing: border-box; 
    float: left; 
    position:relative; 


}

來源

2015-11-03 H.HISTORY

不知道你是什麼之後。像這樣http://jsfiddle.net/j08691/pft3w75y/1/？ – j08691

@ j08691，就是它的交配。優秀...這正是我想要做的！ –

好的，發佈爲答案。 – j08691

使用這些線圓心格：

transform: translate(-50%, -50%); 
left:100%; 
top:100%; 
position:absolute; 
z-index:2;

jsFiddle example

來源

2015-11-03 19:44:37 j08691

在任何時候都將交叉線上絕對定位的div居中？

回答

相關問題