Question

我使用以下样式来垂直和水平对齐内容。

.middle_center{
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

但是，如果.middle_center的内容大于50％，则应用left：50％表示.middle_center的宽度只能扩展到其父级的50％。

这是完整的代码：

.parent{
  position:relative;
  background:#ff00ff;
  width:800px;
  height:300px;
}
.middle_center{
  position:absolute;
  background:#0000ff;
  color:#fff;
  padding:20px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

<div class="parent">
  <div class="middle_center">This is some content. The left:50%; causes its width to be reduced to 50% of its parent's width.</div>
</div>

如果我应用width: fit-content;，它将按预期工作。但是，并非所有浏览器都支持此功能。

有人知道防止宽度缩小的方法吗？希望仅将CSS 添加到子元素，而不在父元素中添加样式。

这是一个Codepen链接：

https://codepen.io/jonniejoejonson/pen/jvddPB

Answer 1

如果您尝试将孩子水平和垂直居中放置，为什么不尝试使用flexbox？一个带有蓝色框的示例如下所示：

.middle_center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.blue_box {
  width: 300px;
  height: 300px;
  background-color: #05c;
}

使用这样的HTML：

<div class="middle_center">
  <div class="blue_box"></div>
</div>

这是JSFiddle上的working example。

Answer 2

制作元素inline-block，然后使用text-align:center将元素水平居中，并使用position:absolute垂直放置元素，并考虑额外的包装器：

.parent {
  position: relative;
  background: #ff00ff;
  width: 600px;
  height: 200px;
  border: 1px solid;
}

.middle_center {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.middle_center>div {
  display: inline-block;
  color: #fff;
  padding: 20px;
  background: #0000ff;
}

<div class="parent">
  <div class="middle_center">
    <div>This is some content.</div>
  </div>
</div>
<div class="parent">
  <div class="middle_center">
    <div>This is some content. This is some content This is some content</div>
  </div>
</div>
<div class="parent">
  <div class="middle_center">
    <div>This is some content. This is some content This is some content This is some content</div>
  </div>
</div>

Answer 3

如果您尝试使用此技术将其居中，请使用position：absolute;在该类（.middle_center）上并给出position：relative;给它的父母。

CSS垂直和水平对齐中心

3 个答案: