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