如何在居中的父 div 内水平对齐 CSS：悬停按钮？

Question

我找不到与此类似的问题。

我想让两个 CSS :hover 按钮在居中的父 div（橙色 div）中水平对齐，但它不起作用。

居中：
光标激活区域（紫色边框）远远超出按钮，覆盖了大部分页面。如何格式化光标激活区域以匹配按钮源 content:url() 的大小而不破坏父 div 的居中？使用 position:absolute 之类的东西似乎不是正确的解决方案。

水平对齐：
display: inline-block; 仅在我将 div id #alpha a{ 更改为 #alpha{ 并将 #beta a{ 更改为 #beta { 时才有效。
这样按钮水平对齐，但我失去了它们的功能。

在此处查看/编辑示例： http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20

一个可能的解决方案：
:hover 或 a:hover 可能需要某些样式，以便可以将意外大的光标激活区域缩小到与按钮相同的大小，而不会影响父 div 的居中。 position:absolute 我运气不好。

有什么见解吗？

body {
				background-color: rgb(0,0,0);
				margin: 0px; 
				border: 0px black;
				padding: 0px;
			}

			#parent {
				background-color: rgb(200,80,0) !important;
				width: 50vw;
				font-size: 0;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);					
				text-align: center;	
				}

			a{
			border: 1px solid red !important;
			}		

			:hover{
			border: 1px solid purple !important;				           
			}

   	        #alpha a{       
   	        border: 1px solid black !important;      
   	        max-width:7%;		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-A_130_130.jpg"); 
		    display: inline-block;
    	}	
    
   		#alpha:hover a{ 
   		border: 1px solid yellow !important;             
			max-width:7%;   		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg"); 
		    display: inline-block;
    	}            

   	        #beta a{ 
   	        border: 1px solid black;             
   	        max-width:7%;	           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-B_130_130.jpg");
		    display: inline-block; 	
	        } 

	      	#beta:hover a{
	      	border: 1px solid yellow !important; 
    	max-width:7%;		           
		    content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
		    display: inline-block;             
		    }

<div id=parent>	
    <div id="alpha"><a href="#"></a>
    </div>
    <div id="beta"><a href="#"></a>
    </div>
    </div>

Answer 1

将此添加到#parent

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