CSS居中对齐的几种方式

时间：2023-03-31 13:08:37 CSS

1.水平居中1.将块级父容器中的内联元素或内联块元素居中，只需使用text-align:center，该方法可以使inline/inline-block/inline-table/inline-flex居中。水平居中

.container{text-align:center;}2、margin:0auto或者margin:auto，你可以block父容器中的块级元素居中。对于行内元素，需要配合display:table一起使用。水平居中

.content{margin:0auto;display:table;}3.水平居中，无文档流。内层div固定宽度，设置left为50%，然后用负margin调整，设置margin-left为负宽度的一半。水平居中

.container{position:relative;}.content{position:absolute;左：50%；宽度：100px；margin-left:-50px;}你也可以用transform:translateX(-50%)替换margin-left:-50px，这样你就不需要知道元素的宽度了。4.弹力盒。水平居中.container{display:flex;证明内容：居中；}或.container{display：flex；flex-direction:column;}.content{align-self:center;}2.垂直居中1.内联元素的垂直居中，将height和line-height设置为相同的值。垂直居中.container{height:100px;line-height:100px;}2.display:table-cell，可以使用不同高度的元素都垂直居中。垂直居中.container{display:table-cell;vertical-align:middle;}3.文档流的垂直居中。内层div固定高度，设置top为50%，然后用负边距调整，设置margin-top为负高度的一半。垂直居中.container{position:relative;}.content{position:absolute;顶部：50%；高度：100px；margin-top:-50px;}您也可以将margin-top:-50px替换为transform:translateY(-50%)，这样您就不需要知道元素的高度。4.弹力盒。垂直居中.container{display:flex;align-items:center;}或.container{display:flex;}。content{align-self:center;}3.水平和垂直居中可以结合前面的方法实现水平和垂直居中。1.text-align:center与line-height结合使用。水平和垂直居中.container{text-align:center;line-height:100px;}2.text-align:center配合display:table-cell使用。水平和垂直居中.container{text-align:center;显示：表格单元格；垂直对齐：中间；}。content{display:inline-block;}3.Display:table-cell与margin:0auto结合使用。如果内部元素是行内元素，可以结合display:table使用。水平和垂直居中.container{display:table-cell;vertical-align:middle;}.content{margin:0auto;}4.文档流的居中方式水平和垂直居中.container{位置：相对；}.content{位置：绝对；左：50%；顶部：50%；宽度：100px；高度：100px；左边距：-50px；margin-top:-50px;}或.content{position:absolute;左：50%；顶部：50%；transform:translate(-50%,-50%);}或.content{position:absolute;宽度：100px；高度：100px；左：0；顶部：0；右：0；底部：0；margin:auto;}5.弹性框。水平和垂直居中.container{display:flex;证明内容：居中；align-items:center;}or.container{display:flex;}.content{margin:auto;}6.CSS3的display:box属性结合box-pack:center(horizo??ntal)和box-align使用:中心（垂直）。目前主流浏览器都不支持，各个浏览器通过相应的私有属性来支持，比如下面的代码：水平和垂直居中.container{/*InternetExplorer10*/显示：-ms-flexbox；-ms-flex-pack：中心；-ms-flex-align:居中；/*Firefox*/显示：-moz-box；包装：中心；-moz-box-align：居中；/*Safari、Opera和Chrome*/显示：-webkit-box；-webkit-box-pack：中心；-webkit-box-align:center;}7、使用伪类：before水平和垂直居中.container{text-align:center;}.container:before{内容：“”；宽度：0；高度：100%；显示：内联块；vertical-align:middle;}.content{display:inline-block;}

上一篇：HTML表单与CSS选择器、伪类与伪元素

下一篇：激光三角测距原理

CSS居中对齐的几种方式相关文章