1. 中心一个区块级元素使用自动为水平边界

二、中心区块级元素,使用垂直边缘的卡尔克

.outer { 位置: 相对; 宽度: 300px; 高度: 180px; 背景颜色: rgb(255, 0, 0); }.inner { 位置: 绝对; 左: 50%; 宽度: 150px; 高度: 180px; 背景颜色: rgb(255, 255, 0); transform: translateX(-75px); } <div class="outer"> <div class="inner"></div> </div>

7、使用显示器中心一个元素:桌面、板块和盒子

8. 使用显示器中心一个元素: flex 和 justify 内容: 中心

.outer { 显示: 网络; 正当标题: 中间; 宽度: 300px; 高度: 180px; 背景颜色: rgb(255, 0, 0); }.inner { 宽度: 150px; 背景颜色: rgb(255, 255, 0); } <div class="outer"> <div class="inner"></div> </div>

您可以添加另一个具有相同尺寸的Div,并将其移动到左侧 -50%(半宽的Div)和50%的Div。

此分類上一篇: <div id="outer"> <div id="inner"><div>Foo foo</div></div> </div>

这个方法也很好地工作:

div.container {
  display: flex;
  justify-content: center; /* For horizontal alignment */
  align-items: center;     /* For vertical alignment   */
}

对于内部<div>,唯一的条件是其高度和宽度不应大于其容器的高度。

克里斯·科伊尔(Chris Coyier)在他的博客上写了一篇关于“在未知中集中”的好文章,这是一个多种解决方案的环节,我发表了一个没有发表在这个问题上,它有更多的浏览器支持,而不是Flexbox解决方案,你不使用显示:表;这可能会破坏其他事情。

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

我最近找到了一个方法:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

两个元素必须是相同的宽度,以便正常运作。

如果有人想要一个 jQuery 解决方案的中心调整这些 divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});