十种CSS元素居中方法总结_0
时间：2023-03-15 13:05:14
科技观察
在前端开发工程师的日常生活中，使用CSS居中元素是很常见的，这也是面试中经常被问到的问题。也许您已经使用flex或absolute+transform来实现它，但是您知道至少有10种方法可以使元素居中吗？因此，在今天的文章中，我为大家整理了10个实现元素居中的CSS技巧，希望能帮助大家提高CSS技能。1.absolute+(-margin)如果已知元素的宽高，我们至少可以使用3种方法来让元素居中。例如，在下图中，小猫的宽度和高度分别为“500px”和“366px”。我们应该如何居中呢？用`absolute+(-margin)`很容易做到！代码如下：HTML
CSS。容器{宽度：800px；高度：600px；边框：实心1px#e3c1a9；边界半径：30px；/*键css*/position:relative;}.cat{宽度：500px；高度：366px；边界半径：50%；位置：绝对；/*关键css*/left:50%;顶部：50%；/*宽度的一半*/margin-left:-250px;/*一半高度*/margin-top:-183px;}这种方式简单易懂，兼容性好。缺点是我们需要知道子元素的宽高。Demo地址：https://codepen.io/qianlong/pen/yLKXLxM2，absolute+marginauto我们也可以通过设置各个方向的距离为0，margin为auto来让小猫居中。CSS代码如下：.container{width:800px;高度：600px；边框：实心1px#e3c1a9；边界半径：30px；位置：相对；}.cat{宽度：500px；高度：366px；边界半径：50%；/*键css*/position:absolute;左：0；右：0；顶部：0；底部：0；margin:auto;}和第一种方法一样，它的兼容性也很好，缺点是需要知道子元素的宽高。Demo地址：https://codepen.io/qianlong/pen/RwMgweO3，absolute+calcCSS3带来了calc计算属性，可以让我们通过它居中一个元素，代码如下：.container{width:800px;高度：600px；边框：实心1px#e3c1a9；边界半径：30px；位置：相对；}.cat{宽度：500px；高度：366px；边界半径：50%；位置：绝对；/*关键css*/top:calc(50%-183px);left:calc(50%-250px);}这个方法的兼容性取决于calc的兼容性。缺点是需要知道子元素的宽高。演示地址：https://codepen.io/qianlong/pen/zYWzYyR4flex的以上三种方法必须提前知道元素的宽高，但是不知道元素的宽高怎么办当然？然后是flex，它非常适合这个。HTML代码：
hellomedium CSS代码：.container{width:400px;高度：200px；边框：实心1px#e3c1a9；边界半径：30px；/*关键css*/显示：flex；对齐项目：居中；证明内容：居中；}.content{填充：20px；边界半径：10px；:#e3c1a9;color:#ffffff;}这真的很酷，我们可以用很少的代码将元素居中，这是我最喜欢的使用方式。演示地址：https://codepen.io/qianlong/pen/abYyzvG5grid和flex一样，grid也可以很方便的用来居中元素。CSS代码：.container{width:400px;高度：200px；边框：实心1px#e3c1a9；边界半径：30px；/*Keycss*/display:grid;}.content{/*Keycss*/align-self:center;自我辩护：中心；填充：20px；边界半径：10px；背景色：#e3c1a9；color:#ffffff;}Demo地址：https://codepen.io/qianlong/pen/dymzPMa6、absolute+transform使用transform，我们也可以在事先不知道宽高的情况下，让元素居中。CSS代码：.container{width:400px;高度：200px；边框：实心1px#e3c1a9；边界半径：30px；/*Keycss*/position:relative;}.content{/*Keycss*/position:absolute;左：50%；顶部：50%；/*关键css*/transform:translate(-50%,-50%);填充：20px；边界半径：10px；背景色：#e3c1a9；ffffff;}演示地址：https://codepen.io/qianlong/pen/KKovwgW7，text-align+line-height+vertical-align以上六种方法比较容易理解，在我们的工作中也经常用到。接下来的4种方法似乎用得不多，但也很值得学习。首先，我们可以将span的“display”属性设置为“inline-block”。然后通过将容器的text-align属性设置为居中，就可以使span元素水平居中。结合line-height等属性使其垂直居中。CSS代码：.container{width:400px;高度：200px；边框：实心1px#e3c1a9；边界半径：30px；/*关键css*/text-align:center;行高：200px；字体大小：0px;}.content{字体大小：16px;/*关键css*/显示：内联块；垂直对齐：中间；行高：初始；文本对齐：左；填充：20px；边界半径：10px；背景色：#e3c1a9；color:#ffffff;}Demo地址:https://codepen.io/qianlong/pen/dymzPWL8,css-tableCSS新的table属性可以让我们把普通的元素变成真正的table元素的效果，有了这个特性，一个元素也可以居中。CSS.container{宽度：400px;高度：200px；边框：实心1px#e3c1a9；边界半径：30px；/*关键css*/显示：表格单元格；文本对齐：居中；vertical-align:middle;}.content{/*Keycss*/display:inline-block;填充：20px；边界半径：10px；背景色：#e3c1a9；color:#ffffff;}Demo地址：https://codepen.io/qianlong/pen/dymzPJE9,writing-mode以前都是用write-mode把内容的布局方向改成垂直的。不过让人意外的是，它还可以让元素居中，不过这种方法有点难理解，而且代码量会比较多。HTML代码：
hellomedium 