居中 / 对齐
最后更新于：2022-04-02 03:14:58
[TOC]
## 水平居中
**图片垂直据居中**
是通过给父元素设置` text-align:center`
**定宽元素居中**
`margin:0 auto;`
**不定宽元素居中**
`display:table;margin:0 auto;`
## 垂直居中
**文字或内敛元素垂直居中**
` height`与`line-height`高度相同且 `overflow: hidden;`
**几个标签的垂直居中**
`.class1,class2,class3{vertical-align:midde}`
## 水平垂直居中
方式一:
```css
.demo{
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%)
}
```
方式二:
```
.container {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
方式三:
```
.container {
display: flex;
align-items: center;
justify-content: center;
}
```
## inline-block 等顶部对齐
`vertical-align:top`
';