最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便
1.居中文本
复制代码代码如下:<div class=”wrap”> 我在中间…… </div>.. height+line-height+text-center（只能居中单行） .wrap{ width:px; height:px; border:px solid red; text-align: center; line-height: px; }
ps:text-align:center只是将元素下面的内联元素居中显示1.2display:table-cell(多行
HTML中的水平垂直居中是网页布局中常见的需求，本文主要针对这一问题进行总结。我们将讨论几种不同的方法，包括适用于单行文本、多行文本以及通用的居中策略。
1. **居中文本**：
当需要居中显示单行文本时，可以使用`<div>`包裹文本，并设置以下CSS样式：
```css
.wrap {
width: px;
height: px;
border: px solid red;
text-align: center; /* 水平居中 */
line-height: px; /* 单行文本垂直居中 */
}
```
注意，`text-align: center;`仅对内联元素进行水平居中，而`line-height`需设置为与容器高度相等，才能使单行文本垂直居中。
2. **多行固定高度居中**：
对于多行文本的垂直居中，可以使用`display: table-cell`和`vertical-align: middle`。然而，这种方法在IE6和IE7中不支持，可以配合`display: table`来解决：
```css
.wrap {
width: px;
height: px;
border: px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
```
对于IE6和IE7，可以通过其他技巧实现，如使用`<em>`标签或创建一个绝对定位的父级元素。
3. **使用内填充（padding）**：
如果元素内容的大小已知，可以使用内填充实现简单居中，但这种方法通常只适用于水平居中：
```css
.wrap {
width: px;
border: px solid red;
padding: px;
}
```
4. **居中元素**：
- 使用`position: absolute`和负`margin`：
当元素具有确定的宽度和高度时，可以通过绝对定位并设置负`margin`使其居中：
```css
.wrap {
width: px;
height: px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
border: px solid red;
}
```
元素内的内容也需要相应的绝对定位：
```css
.wrap span {
width: px;
height: px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
}
```
5. **CSS通用居中方法**：
- `flexbox`布局：
CSS3的`display: flex`提供了一种更现代且灵活的居中方法，可以同时实现水平和垂直居中：
```css
.wrap {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: px;
height: px;
border: px solid red;
}
```
- `grid`布局：
CSS3的`display: grid`同样支持居中，只需设置`place-items: center;`：
```css
.wrap {
display: grid;
place-items: center;
width: px;
height: px;
border: px solid red;
}
```
以上是HTML和CSS中实现水平垂直居中的几种常见方法，选择哪种方法取决于你的需求和浏览器兼容性考虑。随着技术的发展，`flexbox`和`grid`布局正成为更受欢迎的选择，因为它们提供了更强大且易于使用的居中解决方案。
