内部元素横向&&垂直居中的15种常见写法
非常简洁易懂,排名不分先后,开整!
HTML:
<div class="main"> <div class="content"></div> </div>
第一种:常见的margin
.main { position: relative; width: 800px; height: 500px; background-color: lightblue; } .content { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; margin-left: -150px; margin-top: -100px; background: lightpink; }
第二种:position+transform
.main { position: relative; width: 800px; height: 500px; background-color: lightblue; } .content { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: lightpink; }
第三种:通过position的top、right、bottom、left
.main { position: relative; width: 800px; height: 500px; background-color: lightblue; } .content { position: absolute; width: 300px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; background: lightpink; margin: auto; }
第四种:display:table-cell
.main { width: 800px; height: 500px; background: lightblue; display: table-cell; /*标配*/ vertical-align: middle; /*标配*/ } .content { width: 300px; height: 200px; background: lightpink; margin: auto; /*标配*/ } /*三个标配一起使用才能发挥作用*/
第五种:calc,不能大量使用,会影响性能
.main { width: 800px; height: 500px; background-color: lightblue; } .content { width: 300px; height: 70px; background: lightpink; margin: auto; position: relative; top: calc((100% - 70px)/2); }
第六种:flex+align-items
.main { display: flex; width: 800px; height: 500px; background-color: lightblue; justify-content: center; align-items: center; } .content { width: 300px; height: 200px; background: lightpink; }
第七种:flex+align-self
.main { display: flex; width: 800px; height: 500px; background-color: lightblue; justify-content: center; text-align: center; } .content { width: 300px; height: 200px; background: lightpink; align-self: center; }
第八种:flex+margin
.main { display: flex; width: 800px; height: 500px; background-color: lightblue; } .content { width: 300px; height: 200px; background: lightpink; margin: auto; }
第九种:grid+align-content
.main { display: grid; width: 800px; height: 500px; background-color: lightblue; justify-content: center; align-content: center; } .content { width: 300px; height: 200px; background: lightpink; }
第十种:grid+align-item
.main { display: grid; width: 800px; height: 500px; background-color: lightblue; justify-content: center; align-items: center; } .content { width: 300px; height: 200px; background: lightpink; }
第十一种:grid+align-self
.main { display: grid; width: 800px; height: 500px; background-color: lightblue; justify-content: center; } .content { width: 300px; height: 200px; background: lightpink; align-self: center; }
第十二种:grid+margin
.main { width: 800px; height: 500px; display: grid; background: lightblue; } .content { width: 300px; height: 200px; margin: auto; background: lightpink; }
第十三种:grid+palce-content
.main { width: 800px; height: 500px; display: grid; place-content: center; /*这是justy-content与align-items的结合写法*/ background-color: lightblue; } .content { width: 300px; height: 200px; background: lightpink; }
第十四种:grid+place-items
.main { display: grid; width: 800px; height: 500px; background-color: lightblue; place-items: center; } .content { width: 300px; height: 200px; background: lightpink; }
第十五种:grid+template
.main { margin: auto; width: 800px; height: 500px; background-color: lightblue; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr; grid-template-areas: '. . .' '. amos .' '. . .'; } .content { width: 300px; height: 200px; background: lightpink; grid-area: amos; }
好啦,十五种方法Get!
相关推荐
drdrsky 2020-06-16
PioneerFan 2020-06-10
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
冰蝶 2020-01-10
玫瑰小妖 2019-12-31
行吟阁 2019-12-08
aiolos 2016-04-15
loverlucky 2016-03-15
WebVincent 2019-07-01
云端漂移 2019-07-01
renpinghao 2019-06-30
kbkiss 2019-06-29