父級parent設定position：relative；子級parentbox設定position：absolute；left：0；right：0；overflow：hidden；
上面的設定可使外層居中；設定childbox的文字居左顯示，則text-align：left；left：50%；transform：translate（-50%）；width：fit-content（注意此用法的相容性）；注意li需要是行內元素或脫離文件流
html：
}
}
datalist: [
,,,
,,,,
,,,,
,
.parent
position relative
.parentbox
position absolute
bottom -20px
left 0
right 0
border-radius 2px
overflow hidden
.childbox
position: relative;
text-align left
left: 50%
transform translatex(-50%)
-ms-transform translatex(-50%)
-o-transform translatex(-50%)
-webkit-transform translatex(-50%)
-moz-transform translatex(-50%)
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
min-height 20px
libackground: rgba(0, 0, 0, .6)
padding-left: 5px
padding-right: 5px
display inline-block
color: #fff
水平垂直居中 已知寬高 未知寬高
水平 垂直居中的方法 已知寬高 未知寬高 一 居中元素 已知寬高 1 margin 根據已知的寬高寫死，不推薦 div1 div22 定位 margin top margin left.div1 div23 定位 margin.div1 div24 定位 transform 存在相容問題.div1 ...
寬高未知垂直水平居中
寬高未知情況下垂直水平居中很多情況下都會遇到 查了蠻多大家分享的小例子，我也來記錄一下 這裡是css3的 transform 屬性，可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 total...
未知寬高元素垂直居中
給父元素display table 子元素display cell table,vertical align center，子元素即可居中 子元素絕對定位，top50 left50 transform translate 50 50 父元素flex，align items center justif...