CSS div 在div 底部中间|极客教程

CSS div 在div 底部中间

在网页设计中，我们经常会遇到需要将一个div元素放置在另一个div元素的底部中间的情况。这种布局可以用来展示页面内容、导航栏、页脚等元素。在本文中，我们将详细讨论如何使用CSS来实现这种布局效果。

1. 使用Flex布局

Flex布局是CSS3中引入的一种新型布局模式，它可以方便地实现各种页面布局。我们可以通过设置flex属性来实现将一个div元素放置在另一个div元素的底部中间。

示例代码

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}

.content {
  flex: 1;
}

.footer {
  align-self: center;
}

<div class="container">
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

在上面的示例中，我们首先将容器元素的display属性设置为flex，这样就能使用Flex布局。然后设置flex-direction为column，使子元素垂直排列。justify-content用于控制元素在主轴方向的对齐方式，这里我们设置为space-between，使内容元素和页脚元素分别位于容器的顶部和底部。align-items用于控制元素在侧轴方向的对齐方式，这里我们设置为center，使内容元素在容器中居中对齐。最后，我们通过设置align-self属性，将页脚元素在侧轴方向居中对齐。

2. 使用Grid布局

另一种常用的CSS布局方式是Grid布局，它更加灵活和强大。我们可以使用Grid布局将一个div元素放置在另一个div元素的底部中间。

示例代码

.container {
  display: grid;
  grid-template-rows: 1fr auto;
}

.content {
  grid-row: 1;
}

.footer {
  grid-row: 2;
  justify-self: center;
}

<div class="container">
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

在上面的示例中，我们首先将容器元素的display属性设置为grid，这样就能使用Grid布局。然后设置grid-template-rows属性，将页面分为两行，第一行高度为1fr（即占据剩余空间的比例），第二行高度为auto（根据内容自适应高度）。通过设置grid-row属性，我们可以控制元素出现在特定的网格行上，这里内容元素出现在第一行，页脚元素出现在第二行。最后，我们使用justify-self属性将页脚元素在水平方向上居中对齐。

3. 使用绝对定位

除了Flex布局和Grid布局之外，我们还可以使用绝对定位来将一个div元素放置在另一个div元素的底部中间。

示例代码

.container {
  position: relative;
  height: 200px;
}

.content {
  position: absolute;
  top: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div class="container">
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

在上面的示例中，我们首先将容器元素的position属性设置为relative，这样就能将子元素的position属性设置为absolute来实现绝对定位。通过设置内容元素的top属性为0，使其位于容器的顶部。通过设置页脚元素的bottom属性为0，并通过left和transform属性将其水平居中，使其位于容器的底部中间位置。