css元素居中方法
时间：2023-03-30 15:29:21
CSS
写在前面：很多时候我们需要水平居中的时候需要使用margin:0auto；但是要知道这个方法有很大的局限性，不能居中浮动元素和绝对定位元素，而对于其他元素，必须要有width属性。这里说的居中是同时水平居中和垂直居中，如下图，我们是居中元素而不是内容。（以下所有方法结果与下图相同，不再作图）以下方法如无特殊说明，均以以下部分为准：#parent{height:200px;宽度：300px；border:1pxsolid#000;}#demo{height:100px;宽度：60px；background:blue;
内联元素居中（单行）#parent{text-align:center;}#demo{display:inline-block;行高：200px；/*等于父元素高度*/>
Hello /div>这里要注意text-align在IE8及以上等主流浏览器中只能居中内联元素，在IE6、IE7中可以居中任何元素。使用position定位知道子元素和父元素的大小#parent{position:relative;}#demo{position:absolute;顶部：50px；/*计算方法：(父元素高度-子元素高度)/2*/left:120px;/*计算方法：（父元素宽度-子元素宽度）/2*/}方法二#parent{position:relative;}#demo{position:absolute;顶部：0；左：0；右：0；底部：0；margin:auto;}只知道子元素大小#parent{position:relative;}#demo{position:absolute;顶部：50%；左：50%；边距顶部：-50px；/*child元素高度的一半*/margin-left:-30px;/*子元素的一半宽度*/}只知道父元素的大小#parent{position:relative;}#demo{position:absolute;顶部：100px；/*parent元素高度的一半*/left:150px;/*父元素的一半高度*/transform:translateX(-50%)translateY(-50%);}父元素和子元素的大小都不知道#parent{position:relative;}#demo{位置：绝对；顶部：50%；左：50%；transform:translateX(-50%)translateY(-50%);}usetabletocenter#parent{text-align:center;}#demo{display:inline-block;
使用display居中显示：table-cell#parent{显示：表格单元格；文本对齐：居中；vertical-align:middle;}#demo{display:inline-block;}display:flex#parent{justify-content:center;-webkit-align-items：居中；-ms-flex-align:居中；对齐项目：居中；显示：-webkit-flex；display:flex;}还有一种使用font-size属性的居中对齐方式，只能在IE6和IE7中实现，忽略即可。
