在css中使元素垂直水平居中十分常見，那麼我來拋磚引玉，分享幾種我知道的方法
1.彈性盒方法——flex布局
元素：display: flex;justify-content: center;align-items: center;
2.定位+transform：
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)
3.純absolute
父元素 position: relative
子元素 position: absolute;top: 50%;left: 50%; margin-left:-1/2子元素寬度; margin-top: -1/2子元素高度;
4.margin：auto+absolute
父元素 position: relative
子元素 position: absolute；top: 0； left: 0; right:0; bottom:0;margin:auto
5.table-cell
父元素上一層：display table
父元素: display: table-cell;vertical-align: middle;text-align: center;
子元素：display: inline-block;
6.inlineblock法：
父元素：
text-align: center;
line-height: 父元素高度
font-size: 0;
子元素：
display: inline-block;
background-color:yellow;
vertical-align:middle;
以上就是我知道的方法，如有錯誤和遺漏歡迎指正。
使元素水平和垂直居中
一 對行級元素水平垂直居中 text align center heiht與line height的值一樣 二 對塊級元素垂直居中對齊 1 flex布局 parent 2 父元素高度固定 2.1 position 子元素已知寬度 父元素設定為 position relative 子元素設定為 pos...
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...