使用CSS將元素中心放置在左上角，以引用“轉換”到元素中心

Question

我想將元素的中心放置在單擊位置相同的位置：

為此，我想使用transform，但是對於初始的CSS屬性，我不能使用：

 #element{ position:fixed; top:0; left:0; transform:translate(-50%, -50%); } 

由於初始參考位置相同，並且在使用transform時，平移時它將不起作用，因此請考慮以下示例：

 let action1=document.querySelector("#actions1"); let action2=document.querySelector("#actions2"); let action3=document.querySelector("#actions3"); let action4=document.querySelector("#actions4"); let boton1=document.querySelector("#me1"); let boton2=document.querySelector("#me2"); let boton3=document.querySelector("#me3"); let boton4=document.querySelector("#me4"); boton1.addEventListener("click",move1); boton2.addEventListener("click",move2); boton3.addEventListener("click",move3); boton4.addEventListener("click",move4); function move1(e){ let startX=e.clientX || e.touches[0].clientX; let startY=e.clientY || e.touches[0].clientY; action1.style.display="grid"; action2.style.display="none"; action3.style.display="none"; action4.style.display="none"; action1.style.transform="translate("+startX+"px,"+startY+"px)"; } function move2(e){ let startX=e.clientX || e.touches[0].clientX; let startY=e.clientY || e.touches[0].clientY; action2.style.display="grid"; action1.style.display="none"; action3.style.display="none"; action4.style.display="none"; action2.style.transform="translate("+startX+"px,"+startY+"px)"; } function move3(e){ let startX=e.clientX || e.touches[0].clientX; let startY=e.clientY || e.touches[0].clientY; action3.style.display="grid"; action1.style.display="none"; action2.style.display="none"; action4.style.display="none"; action3.style.transform="translate("+startX+"px,"+startY+"px)"; } function move4(e){ let startX=e.clientX || e.touches[0].clientX; let startY=e.clientY || e.touches[0].clientY; action4.style.display="grid"; action1.style.display="none"; action2.style.display="none"; action3.style.display="none"; let size=action4.getBoundingClientRect(); action4.style.top=startY-(size.height/2)+"px"; action4.style.left=startX-(size.width/2)+"px"; } 

 #actions1,#actions2,#actions3,#actions4{ display:none;grid-template-columns:auto;grid-gap:5px; padding:10px; } #actions1{ position:fixed;top:0;left:0; } #actions2{ position:fixed;top:0;left:0; transform:translate(-50%, -50%); } #actions3{ position:fixed;top:-40px;left:-45px; } #actions4{ position:fixed;top:0;left:0; } #botons{ position:fixed; top: 50px;left:0;right:0; display:flex; justify-content: space-around; } 

 <div id="botons"> <button id="me1">normal</button> <button id="me2">not posible to reference with transform</button> <button id="me3">desirable</button> <button id="me4">old school</button> </div> <div id="actions1"> <button>open1</button> <button>new1</button> <button>delete1</button> </div> <div id="actions2"> <button>open2</button> <button>new2</button> <button>delete2</button> </div> <div id="actions3"> <button>open3</button> <button>new3</button> <button>delete3</button> </div> <div id="actions4"> <button>open4</button> <button>new4</button> <button>delete4</button> </div> 

如您所見，第一個示例和第二個示例的行為相同，因為該元素的初始參考位置不變，它們都具有：

 #element{ position:fixed;top:0;left:0; } 

第三個示例顯示了理想的結果，但是此方法使我一直都知道寬度和高度，如果我將孩子添加到此元素中將無法正常工作，最后一個示例顯示了舊學校如何做到這一點，取大小然后除以2，這樣做的問題是它很容易破解，因為變換比直接改變位置具有更好的性能。

Answer 1

如果單擊演示按鈕中的任何位置，它將在按鈕內的光標單擊中心點顯示一個.dropdown-menu 。

也不是太笨拙，因為它的position: absolute使用transform: translate(-50%,-50%) position: absolute位於.btn-group內部，可以根據左上角很好地居中。

您可以在.dropdown-menu添加盡可能多的按鈕，並且該按鈕將始終以單擊為中心。

最好在頁面加載時在.dropdown-menu內呈現按鈕，但是如果您有通過JavaScript添加的動態按鈕，則可以根據需要添加按鈕。

單擊.dropdown-menu時，您需要觸發.dropdown-menu .hide()和.dropdown-menu方法，這應該很容易。

如果您想玩游戲，也請參見http://jsfiddle.net/joshmoto/sdn5eboa/ 。

在下面運行代碼以查看示例...

 // demo button click event $('.btn-demo').on('click', function(e) { // get the next element matching .dropdown-menu var $dropdown_menu = $(this).next('.dropdown-menu'); // your custom button or add these however method you are doing var btn_1 = '<button class="dropdown-item" type="button">Button 1</button>'; var btn_2 = '<button class="dropdown-item" type="button">Button 2</button>'; var btn_3 = '<button class="dropdown-item" type="button">Button 3</button>'; // add the desired buttons to the .dropdown-menu on click $dropdown_menu.html(btn_1 + btn_2 + btn_3); // add this css to .dropdown-menu menu on click $dropdown_menu.css({ // top postion: cursor click postion minus .btn-demo top-offset position top: (e.pageY - $(this).offset().top), // left postion: cursor click postion minus .btn-demo left-offset position left: (e.pageX - $(this).offset().left), // display block to reveal the .dropdown-menu or use .show() function // display: 'block' }).show(); }); 

 @import 'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'; HTML, BODY { height: 100%; min-height: 100%; cursor: crosshair; width: 100%; } BUTTON { cursor: crosshair !important; } .btn-group { position: relative; display: inline-flex; vertical-align: middle; } .dropdown-menu { transform: translate(-50%,-50%); position: absolute; display: none; z-index: 1000; float: left; min-width: 0; } 

 <!-- demo containers to center .btn-group please ignore this --> <div class="d-flex align-items-center h-100"> <div class="container"> <div class="col-12 text-center"> <!-- question related code only --> <div class="btn-group"> <button class="btn btn-primary btn-demo"> Long demo button title for testing </button> <div class="dropdown-menu"></div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

僅翻譯版本

請參見下面的transform: translate()僅transform: translate()版本，以將下拉菜單中心定位在鼠標光標上的按鈕內部。

這也是一個jsfiddle： http : //jsfiddle.net/joshmoto/2qLvp5a3/

 // demo button click event $('.btn-demo').on('click', function(e) { // get the next element matching .dropdown-menu var $dropdown_menu = $(this).next('.dropdown-menu'); // your custom button or add these however method you are doing var btn_1 = '<button class="dropdown-item" type="button">Button 1</button>'; var btn_2 = '<button class="dropdown-item" type="button">Button 2</button>'; var btn_3 = '<button class="dropdown-item" type="button">Button 3</button>'; // add the desired buttons to the .dropdown-menu on click $dropdown_menu.html(btn_1 + btn_2 + btn_3); // show the dropdown menu so we can get its width height // currently hidden using css opacity: 0; $dropdown_menu.show(); // dropdown menu width height var ddm_w = $dropdown_menu.outerWidth(); var ddm_h = $dropdown_menu.outerHeight(); // click position values inside button var click_x = e.pageX - $(this).offset().left; var click_y = e.pageY - $(this).offset().top; // new translate positions for center menu var trans_x = click_x - (ddm_w / 2); var trans_y = click_y - (ddm_h / 2); // add this css to .dropdown-menu menu on click $dropdown_menu.css({ // translate position to top left corner of dropdown 'transform' : 'translate(' + trans_x + 'px,' + trans_y + 'px)', // reveal the dropdown menu 'opacity' : 1 }); }); 

 @import 'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'; HTML, BODY { height: 100%; min-height: 100%; cursor: crosshair; width: 100%; } BUTTON { cursor: crosshair !important; } .btn-group { position: relative; display: inline-flex; vertical-align: middle; } .dropdown-menu { opacity: 0; position: absolute; top: 0; left: 0; display: block; float: left; min-width: 0; margin: 0; } 

 <!-- demo containers to center .btn-group please ignore this --> <div class="d-flex align-items-center h-100"> <div class="container"> <div class="col-12 text-center"> <!-- question related code only --> <div class="btn-group"> <button class="btn btn-primary btn-demo" type="button"> Long demo button title for testing </button> <div class="dropdown-menu"> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>