[前端筒子树]如何让元素块居中（垂直和水平）？
时间：2023-03-30 18:02:15
CSS
【前端奶酪树】如何让元素块垂直居中？水平居中和垂直居中是前端开发过程中肯定会遇到的问题。下面我来解释一下几种常用的方法。1/使用Flex布局实现极速居中HTML
CSS.container{display:flex;证明内容：居中；align-items:center;}2/绝对定位下，目标元素的宽高已知，使用CSS或JS实现定长定宽容器CenterHTML.item{margin:0auto;宽度：200px；height:200px;}2.1margin设置为宽度的一半或者auto.item{width:300px;高度：200px；位置：绝对；左：50%；最高：50%；边距：-100px00-150px；//ormargin:auto;}2.2使用jquery计算left和top的值$(window).resize(function(){$('.item').css({position:'absolute',left:($(window).width()-$('.item').outerWidth())/2，顶部：($(window).height()-$('.item').outerHeight())/2});});//初始运行函数：$(window).resize();3/在Fixed定位下，使用margin:auto使固定元素居中CSS.item{position:fixed;n:汽车;顶部：0；右：0；左：0；底部：0；宽度：200px；height:100px;}4/使用display:table-cell实现居中注意需要定义父元素的width，同时父元素的vertical-align和item的margin:auto两者缺一不可CSS.container{width:400px;显示：表格单元格；vertical-align:middle;}.item{margin:0auto;}
