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

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

时间: 2024-11-25 15:21:29 浏览: 58

要在父级div盒子中使包含一个图标和一个英文字符的两个子级div垂直居中，可以采用以下几种方法： 1. **绝对定位+负margin**: 对两个子div分别设置position属性为absolute，并给它们设置相同的top值为负的50%（因为字体高度的一半是父元素高度的一半），然后给父div设置position为relative，最后给文本div加回顶部间距，等于父元素高度的一半。 ```html <div class="parent"> <div class="icon"></div> <div class="text">字母</div> </div> ``` ```css .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垂直水平居中。 ```html <div class="parent"> <div class="icon"></div> <div class="text">字母</div> </div> ``` ```css .parent { display: flex; justify-content: center; align-items: center; } ``` 3. **CSS Grid布局**: 类似地，如果需要更精细的控制，可以使用CSS Grid，设置grid-template-columns和align-items属性。 ```html <div class="parent"> <div class="icon"></div> <div class="text">字母</div> </div> ``` ```css .parent { display: grid; place-items: center; } ``` 在这三种方法中选择适合你当前项目的技术栈即可。

阅读全文