CSS实现盒子水平垂直居中代码
时间: 2024-08-12 12:09:45 浏览: 31
在CSS中,实现一个元素(通常是一个包含块或块级元素)在页面水平和垂直方向上居中的方法有很多种。以下是几种常见的技术:
1. **Flexbox** 方法:
```css
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
```
或者针对行内元素:
```css
.item {
display: inline-block;
vertical-align: middle; /* 适用于行内元素 */
}
```
2. **Grid Layout** 方法:
```css
.container {
display: grid;
place-items: center; /* 同时水平和垂直居中 */
}
```
3. **Positioning + transform** 方法(适用于相对定位元素):
```css
.container {
position: relative;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 让元素移动到中心 */
}
```
4. **内联盒模型(针对行内元素)**:
```css
.text {
display: inline-block;
white-space: nowrap; /* 防止换行 */
text-align: center; /* 水平居中 */
line-height: 1; /* 设置line-height与元素高度一致,利于垂直居中 */
margin-bottom: auto; /* 上下留空 */
}
```
5. **表格布局**:
```css
.container {
display: table;
width: 100%;
height: 100%;
}
.centered-element {
display: table-cell;
vertical-align: middle;
text-align: center;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)