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

尝试将CSS更改为：

.Profile_Photo_Border {
  border: 3px solid #052d31;
  height: 90px;
  width: 90px;
  border-radius: 3px;
  position: relative;
}

.Profile_Photo {
  background-color: #005e67;
  height: 80px;
  width: 80px;
  border-radius: 3px;
  text-align:center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
}

此链接也可能有用： https://css-tricks.com/centering-css-complete-guide/

Answer 2

你的第二个div的高度和宽度比第一个div小10px。因此，要集中中间一个添加边距：5px;到第二个div，Profile_Photo。

Answer 3

将以下样式display: flex;添加到parent div和

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;
}

请参阅小提琴：＆＃34; https://jsfiddle.net/ukgnnp4k/＆＃34;

见截图：

enter image description here

Answer 4

.Profile_Photo {

    background-color:#005e67;
    height: 80px;
    width: 80px;
    border-radius: 3px;
    margin: 5px auto;

}

Answer 5

您可以添加此css。

.Profile_Photo_Border {
        border: 3px solid #052d31;
        height: 90px;
        width: 90px;
        border-radius: 3px;
    }
    .Profile_Photo {
        background-color:#005e67;
        height: 80%;
        width: 80%;
        border-radius: 3px;
        text-align:center;
        margin:10px auto;
    }

使用此http://jsfiddle.net/18yao91v/244/

Answer 6

如果外部div和内部div具有固定宽度，则可以使用css position来对齐内部元素。

见下面的CSS。

.Profile_Photo_Border {
    	border: 3px solid #052d31;
    	height: 90px;
    	width: 90px;
    	border-radius: 3px;
        position: relative;
    }
    .Profile_Photo {
    	background-color:#005e67;
    	height: 80px;
    	width: 80px;
    	border-radius: 3px;
	 /*   alignment-adjust:middle;  No need to use this. */
	    text-align:center;
        position: absolute;
        top: 5px;
        left: 5px;
    }

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

Answer 7

这里是将div放在div中的另一种方法，无论宽度和高度如何 - Codepen

.Profile_Photo_Border {
    border: 3px solid #052d31;
    height: 90px;
    width: 90px;
    border-radius: 3px;
  position: relative;
}
.Profile_Photo {
    background-color:#005e67;
    height: 80px;
    width: 80px;
    border-radius: 3px;
    position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

来自CSS Tricks的guide用于居中div。

另一个来自Flexbox上的CSS技巧的guide是另一种更好的方式。

希望这可以帮助您更好地理解。

Answer 8

这是我的2美分，我使用了display：table.cell css style：

 .Profile_Photo_Border {
  border: 3px solid #052d31;
  height: 150px;
  width: 150px;
  border-radius: 3px;
  display: table-cell; /*added*/
  vertical-align: middle; /*added*/
}

.Profile_Photo {
  background-color: #005e67;
  height: 80px;
  width: 80px;
  border-radius: 3px;
  text-align: center; /*added*/
  margin: auto; /*added*/
}

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

8 个答案: