[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`