学习笔记--CSS居中元素

水平居中

1）行内元素（display:inline）文字、图片等，水平居中是通过在父元素设置text-align:center来实现；
2）定宽块级元素（display:block）可设置左右margin为auto来实现；
3）可改变元素display为inline，然后设置父元素为text-align；
4）利用绝对定位，让元素向右偏移50%，再向左偏移自身的50%（transform:translateX(-50%)）；
6）利用flex：1、改变display为flex，设置margin左右为auto。2、将width设置为fit-content，配合margin左右auto。3、父元素display设置flex，并设置justify-content:center；

垂直居中

1）行内元素只要设置行高等于盒子的高度即可；
2）多行的行内元素，给父元素设置display:table-cell和vertical-align:middle；
3）利用绝对定位position:absolute，再设置top：50%，在设置元素高度的一半margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);。
4）设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
5）利用flex：父元素设置display:flex和align-items:center