怎么让定位的图标绝对垂直居中

要让定位的图标绝对垂直居中，可以使用CSS中的Flexbox属性，将父元素设置为Flex容器，然后使用align-items:center来垂直居中子元素。同时，可以使用position:absolute和top,left,bottom,right等属性将子元素在父元素中定位。具体的代码实现如下：

HTML代码：

<div class="parent">
  <img src="location-icon.png" alt="定位图标">
</div>

CSS代码：

.parent{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  /*同时，需要给父元素设置一个高度*/
  height:200px;
}

.parent img{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

相关问题

按钮图标在 i 标签中 垂直水平居中展示

在HTML中，如果你想将按钮图标垂直和水平居中地显示在`<i>`标签内，通常可以结合CSS样式来实现。你可以使用Flexbox或者Grid布局，这两种现代布局模式对于元素对齐非常方便。下面是一个简单的例子：

<i class="button-icon">
  <button class="centered-button">我的按钮</button>
</i>

<style>
.centered-button {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 24px; /* 可调整图标大小 */
}
</style>

在这个例子中，`.centered-button`元素内部的按钮会被设置为flex容器，并通过`justify-content: center;`使其内容在水平方向上居中，`align-items: center;`使其内容在垂直方向上居中。

如果你希望使用传统的CSS，也可以借助`line-height`和绝对定位来达到类似的效果：

<i class="button-icon">
  <button class="centered-button">
    <span>我的按钮</span>
  </button>
</i>

<style>
.button-icon {
  position: relative;
}

.centered-button {
  width: 60px; /* 或者自适应宽度 */
  height: 60px; /* 自适应高度 */
  line-height: 60px; /* 设置相同的高宽，使文本垂直居中 */
  text-align: center; /* 文本水平居中 */
  position: absolute; /* 使内部元素脱离文档流 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 配合top和left使中心对齐 */
}
</style>

一个父级div盒子里面有两个子级div，一个图标，一个英文字母，怎么让两个子盒子在父盒子里面垂直居中

要在父级div盒子中使包含一个图标和一个英文字符的两个子级div垂直居中，可以采用以下几种方法：

1. **绝对定位+负margin**:
对两个子div分别设置position属性为absolute，并给它们设置相同的top值为负的50%（因为字体高度的一半是父元素高度的一半），然后给父div设置position为relative，最后给文本div加回顶部间距，等于父元素高度的一半。

<div class="parent">
  <div class="icon"></div>
  <div class="text">字母</div>
</div>

.parent {
  position: relative;
  height: /* 父元素实际高度 */;
}

.icon,
.text {
  position: absolute;
  top: calc(-50%);
}
.text {
  top: calc(50% + /* 文本行高 */);
}

2. **Flexbox布局**:
如果HTML5和CSS3支持，你可以使用flexbox布局。将父div设置为display:flex; justify-content:center; align-items:center; 就可以让两个子div垂直水平居中。

<div class="parent">
  <div class="icon"></div>
  <div class="text">字母</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. **CSS Grid布局**:
类似地，如果需要更精细的控制，可以使用CSS Grid，设置grid-template-columns和align-items属性。

<div class="parent">
  <div class="icon"></div>
  <div class="text">字母</div>
</div>

.parent {
  display: grid;
  place-items: center;
}

在这三种方法中选择适合你当前项目的技术栈即可。