当前位置：首页 > Web前端 > HTML

面试题：水平垂直居中的17种方法

时间：2023-03-28 01:09:46 HTML

面试题：水平垂直居中的17种方式我想分析三种情况，水平居中，垂直居中，水平垂直居中。仅就水平和垂直居中而言，大概有以下解决方案：居中元素不定宽高absolute+transformflexattributecenteringflex+sub-itemmarginautogridattributecenteringgrid+subitemmarginautogrid+subitemattributecentering-webkit-boxattributecenteringtable-cell+text-alignline-height+text-alignwriting-modetableonlycenteringelementfixedwidthandheight适用：noticewidthandheight+absolute+negativemarginnoticewidth+absolute+calcNotesWidth+absolute+marginauto的更有限的全局居中NotesWidth+fixed+transformNotesWidth+fixed+negativemarginNotesWidth+fixed+calcNotesWidth+fixed+marginautohorizo??ntalcentertext-align:centertext-align:center;需要设置display:inline-block内联块元素的绝对定位+transform位移position:absolute;左：50%；转换：translateX(-50%)；超出文档流宽度+边距：0自动宽度：100px；边距：0自动；这里width:100px必须是一个具体的数字，这个居中就是外层居中，width里面的内容是不居中的。垂直居中。绝对定位+变换位移position:absolute;top:50%;transform:translateY(-50%);同水平方向居中，脱离文档流table-cell+vertical-aligndisplay:table-cell;vertical-align:middle;display:table-cell，让它的标签元素以表格单元格的形式呈现,类似于td标签,vertical-align:middle，用于指定inline或table-cell元素垂直居中，水平垂直居中，绝对居中+变换位移123123

/div>.father{位置：相对；}.son{位置：绝对；左：50%；顶部：50%；transform:translate(-50%,-50%);}flex属性居中123123

.father{display:flex;证明内容：居中；align-items:center;}flex+marginauto123123

.father{display:flex;}.son{边距:auto;}网格属性居中123123//或123123.father{显示：网格;证明内容：居中；align-items:center;}网格子项属性居中123123.father{display:grid;}.son{align-self:center;justify-self:center;}grid+marginauto123123.father{display:grid;}.son{margin:auto;}grid类似于flex，是升级版flex，所以grid比绝对定位、flex、grid能做的更多关于水平和垂直居中，这里说说centering-webkit-box属性居中这种比较老的布局方式，这是一个过时的布局，可以看这篇文章文章CSS3display:flex和display:box有什么区别？有网友说：flex是2012的语法，以后是标准。box是2009的语法，已经过时了，需要前缀为123123.father{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}table-cell+text-align123123.father{显示：表格单元格；垂直对齐：中间；文本对齐：居中；}。儿子{显示：inline-block;}line-height+text-align123123.father{height:200px;行高：200px；text-align:center;}line-heightandheight，行高和高度相同，垂直方向自然居中writing-mode123123.father{writing-mode:tb-lr;书写模式：vertical-lr；text-align:center;}.father.son{书写模式：lr-tb;书写模式：horizo??ntal-tb；文本对齐：居中；宽度：100%；显示：内联块；}.father9.son.sonson{显示：内联块；text-align:initial;}这个很冷，有人介绍过这种情况table123123

.father{text-align:center;}表格标签本身垂直居中。text-align:center之后，水平居中。元素有width和height的时候可以看demo，关于widthHigh+absolutecenter+negativemargin还有3个方案要知道123123.father{位置：相对；高度：200px;}.son{宽度：100px;高度：100px；位置：绝对；顶部：50%；左：50%；margin:-50px00-50px;}父元素必须有高度，这样子元素就必须有高度宽度和高度可以用来计算边距值。宽高+绝对定位+calc123123.father{position:relative;高度：200px;}.son{宽度：100px;高度：100px；位置：绝对；顶部：计算（50%-50px）；left:calc(50%-50px);}和margin负边距一样，父元素需要设置一个高度。子元素必须有高度，不能有margin，使用CSS3中的calc计算中心位移，兼容性需要支持CSS3属性注意宽高+绝对居中+margin:auto123123.father{位置：相对；高度：300px;}.son{宽度：100px;高度：100px；位置：绝对；顶部：0；左：0；右：0；底部：0；margin:auto;}同上两种情况。这三种方法都需要定位方法来实现水平和垂直居中。需要设置父元素的高度（必须要有，才能开屏），需要设置子元素的宽高。前两种方法是计算它在父元素中的位置。相对位置，后一种方式是为了说明子元素是一个容器（如果没有设置宽高就什么都不是）。其实就横向和纵向居中而言，如果面试官硬要问，还有吗？确实有，使用固定定位。但这种方法有缺陷。虽然它可以实现水平和垂直居中，但是它是相对于视口（viewport），而不是父元素。方法是把上面的方法改成fixedwithabsolute知宽高+fixed+transform知宽高+fixed+负margin通知宽高+fixed+calc通知宽高+fixed+marginauto这四个方法，都需要设置子元素的宽高，这里粘贴代码123123/*transform*/.son{width:100px;高度：100px；位置：固定；顶部：50%；左：50%；转换：翻译（-50%，-50%）；background:blue;}/*负边距*/.son{width:100px;高度：100px；位置：固定；顶部：50%；左：50%；顶部：-50px；background:blue;}/*calc*/.son{width:100px;高度：100px；位置：固定；顶部：计算（50%-50px）；左：计算（50%-50px）；background:blue;}/*margin:auto*/.son{width:100px;高度：100px；位置：固定；顶部：0；左：0；底部：0；右：0；;}总结随着微软宣布放弃IE11，实际项目中可以使用flex布局，grid部分还不适应，但未来肯定会取代flex。虽然我写了很多，但我不会在工作中使用table、writing-mode、-webkit-box等过时的布局方式。写这篇文章纯粹是为了在面试的时候被问到这种问题。收获是absolute的居中需要父子同心（设置父元素的高度，设置子元素的宽高），而fixed的居中只需要设置子元素的宽度和高度。在线演示查看参考资料如何让元素居中（最终版）给你详细的CSS布局指南，请查看CSS实现水平和垂直居中的1010种方法（史上最全）本文参与了SegmentFaultthink-no随笔《如何“反杀”面试官？》，正在阅读的你欢迎加入。

上一篇：使用SAPUI5绘制BusinessRuleControl

下一篇：为什么b站不支持vp9？

面试题：水平垂直居中的17种方法相关文章

最新推荐

猜你喜欢