如何用 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

尝试将您的 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;
}

这个 link 也可能有帮助： https://css-tricks.com/centering-css-complete-guide/

Answer 2

第二个 div 的高度和宽度比第一个小 10px。所以为了集中中间的一个添加 margin:5px; 到第二个 div, Profile_Photo.

Answer 3

如果外层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 4

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

margin: 0 auto;
align-self: center;

到 child 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/”

见截图：

Answer 5

.Profile_Photo {

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

}

Answer 6

这是另一种在 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;
}

还有 guide 来自 CSS 居中 div 的技巧。

来自 CSS Tricks on Flexbox 的另一个 guide 这是另一种更好的方法。

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

Answer 7

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

 .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*/
}

Answer 8

你可以添加这个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/

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

how can set a div center of other div with CSS?

html

css

center