css设置div居中的关键代码（css篇前端面试中常问的div居中方法）

发布时间：2024-01-24阅读(5)

导读马上又要到秋招的时候了，又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法，这里给大家总结一下都有哪些常用的方法。绝对定位父级元素（p....

马上又要到秋招的时候了，又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法，这里给大家总结一下都有哪些常用的方法。

绝对定位

父级元素（parent）采用相对定位（relative），需要居中的元素（demo）采用绝对定位（absolute）。
居中元素向上偏移50%，向左偏移50%，此时左顶点位于中心，不过我们需要的是整体居中，所以在偏移自身一半的宽高。（如下图）

css设置div居中的关键代码（css篇前端面试中常问的div居中方法）(1)

还未偏移一半自身宽高

<style> .parent { position: relative; width: 500px; height: 500px; border: solid red 1px; } .demo { position: absolute; width: 100px; height: 100px; border: solid blue 1px; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } </style> <body> <div > <div ></div> </div> </body>

弹性方法居中

通过flex弹性布局设置垂直居中和水平居中

<style> .parent { width: 500px; height: 500px; border: solid red 1px; display: flex; // 垂直，水平居中 align-items: center; justify-content: center; } .demo { width: 100px; height: 100px; border: solid blue 1px; } </style> <body> <div > <div ></div> </div> </body>

使用transform居中

在子元素不知道自身宽高情况，使用transform进行比偏移。

<style> .parent { position: relative; width: 500px; height: 500px; border: solid red 1px; } .demo { position: absolute; border: solid blue 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div > <div >居中</div> </div> </body>

以上3种是常用的方法，当然还有其他居中方法比如grid布局，table-cell布局等。

TAGS标签：设置中的关键代码前端 css设置div居中

欢迎分享转载→http://www.youqulife.com/read-218942.html

上一篇：促进大学毕业生就业创业（帮学生强能力为就业添助力）

下一篇：云南迪庆属于哪个市

精品推荐

生活中的人生感悟说说，字字千金，富含哲理！
发布时间：2024-05-13

生活标签

云南迪庆属于哪个市蓄电池的保养方法有哪华坪县美食华坪县光遇内存多大映雁的寓意映雁麦当劳早餐卡一天用几大众途观怠速抖动怎么建华区美食建华区 class10以上的映阳的寓意映阳春节别名大众途观怠速抖动后熄华容区美食华容区 ershell是啥 windowspow windowspowershell 映易的寓意映易么称呼大儿子二儿子三儿子怎大众途观挂d档怠速抖建宁县美食寄存器和存储器的区别映真的寓意 80后的春节是怎么过长城vv5胎压警报怎当作与当做有什么区别建瓯市美食建瓯市的开关按钮是什么意思 stabilizer 映之的寓意映之先到原地址吗快递更改地址后快递是先到大众途观发动机怠速抖华亭县美食华亭县空调L和H哪个是制冷涌宇的寓意涌宇米蒿的吃法有几种长城vv5胎压监测怎建平县美食更多…

css设置div居中的关键代码（css篇前端面试中常问的div居中方法）

相关文章

精品推荐

生活标签

图片生活

点击排行