html - 如何使用 CSS 设置其他 div 的 div 中心？

Question

例如，我为边框样式设计了一个 div，我设计了另一个 div 到它的中心，我怎样才能将它设置到更大的 div 的中心？

.Profile_Photo_Border {
    	border: 3px solid #052d31;
    	height: 90px;
    	width: 90px;
    	border-radius: 3px;
    }
    .Profile_Photo {
    	background-color:#005e67;
    	height: 80px;
    	width: 80px;
    	border-radius: 3px;
	    alignment-adjust:middle;
	    text-align:center;
    }
	

    <div class="Profile_Photo_Border">
      <div class="Profile_Photo"></div>
    </div>

Answer 1

在parent div和

中添加如下样式 display: flex;

margin: 0 auto;
align-self: center;

子 div 使其水平和垂直居中。

所以样式变成:

.Profile_Photo_Border {

    border: 3px solid #052d31;
    height: 90px;
    width: 90px;
    border-radius: 3px;
    display: flex;
}
.Profile_Photo {
    background-color:#005e67;
    height: 80px;
    width: 80px;
    border-radius: 3px;
    alignment-adjust:middle;
    text-align:center;
    margin: 0 auto;
    align-self: center;
}

参见 fiddle :“https://jsfiddle.net/ukgnnp4k/”

看截图: