css水平居中的方法


方法1
通过margin:0 auto ; text-align:center;实现css水平居中
方法2
通过display:flex(弹性布局)实现css水平居中

父元素:
display:flex;
flex-direction:column; //从上到下垂直排列
而子元素:
align-self:center; //flex子项的对齐方式

方法3
通过display:table-cell和margin-left实现CSS水平居中。

对于父元素和子元素的宽度都确定的情况,适合通过display:table-cell(表格单元格)和margin-left实现CSS水平居中。

使用时,父元素display:table-cell,子元素给剩余宽度一半的margin-left。
方法4
通过position:absolute实现CSS水平居中。

这种方法跟上一个方法适用场景一样,也是适用于父元素和子元素的宽度都确定的情况。

使用时,父元素position:absolute,子元素给剩余宽度一半的margin-left。

方法5
通过width:fit-content实现CSS水平居中。

这种方法可以确保子元素宽度不确定的情况下,也能实现CSS水平居中。

需要注意的是,需要配合“margin: 0 auto; text-align: center”使用。

方法6
通过display:inline-block(行内块元素)和text-align:center实现CSS水平居中。

display:inline-block能改父元素内的子元素的表达样式,同样需要配合“margin: 0 auto; text-align: center”使用。

方法7
给父元素样式position:relative,给子元素float:left和margin-left就可以实现CSS水平居中。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM