前言：
目前各位老铁们对“htmldiv中的div居中css”可能比较关注，小伙伴们都想要分析一些“htmldiv中的div居中css”的相关文章。那么小编也在网摘上收集了一些有关“htmldiv中的div居中css””的相关知识，希望看官们能喜欢，我们一起来了解一下吧！一、position元素
第一种：通过 position + translateY
a：水平及垂直同时居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}b：水平居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; left: 50%; transform: translateX(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}c：垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; transform: translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}第二种：通过 position + margin
a：水平及垂直同时居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}b：水平居中
1 .wrapper { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 border: solid 2px red; 6 border-radius: 5px; 7 } 8 9 .wrapper .content{10 position: absolute;11 left: 50%;12 margin-left: -50px;13 height: 100px;14 width: 100px;15 border: solid 2px blue;16 border-radius: 5px;17 }c：垂直居中
.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}二、元素内部信息第一种：元素内容没有标签，只有内容，这样垂直设置height和line-height一样就可以了，水平设置text-align:center就可以
.wrapper{ height: 50px; line-height: 50px; text-align: center; }第二种：元素内部元素居中，设置如下：
.wrapper-table{ display: table-cell; height: 100px; width: 100px; vertical-align: middle; text-align: center; border: solid 2px yellow;}.wrapper-table .wrapper-table-cell{ border: solid 2px #009900;} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #htmldiv中的div居中css #css弹出框居中 #html位置居中标签 #css边框怎么居中 #js div居中
