CSS中定位居中

咱就是说!牛逼啊这个定位,再也不能担心垂直居中的问题了。

绝对定位:position:absolute

偏移量(水平居中):left:50%;margin-left:-(自己宽度的一半)

偏移量(垂直居中):top:50%;margin-top:-(自己高度的一半)

 

但有的时候,像素大小不是合理,这时可以使用transform:translate(-50%,-50%)

 

为什么要学这个呢?因为之前都是使用inline-height:父元素的高度,但是由于每个标签的基线是不一样的比较难以控制,还要在被居中标签添加额外属性(vertical-align:middle)

行高居中,因为img的基线在底部,所以居中是这样,这算什么居中啊!

 

 

使用定位的居中方法:(父元素相对定位,子元素绝对定位,记住margin是负的)

 

posted @ 2022-07-24 23:19  漫步火星  阅读(3697)  评论(0编辑  收藏  举报