html中div如何水平和垂直居中的几种css方法代码
2023年7月16日发(作者：)
html中div如何⽔平和垂直居中的⼏种css⽅法代码⼀、记录下⼏种盒⼦居中的⽅法：1、margin固定宽⾼居中；2、负margin居中；3、绝对定位居中；4、table-cell居中；5、flex居中；6、transform居中；7、不确定宽⾼居中(绝对定位百分数)；8、button居中。⼆、代码演⽰(html使⽤同⼀个Demo)：html Demo：
1、margin固定宽⾼居中这种定位⽅法纯粹是靠宽⾼和margin拼出来的，不是很灵活。CSS：2、负margin居中利⽤负的margin来进⾏居中，需要知道固定宽⾼，限制⽐较⼤。CSS:3、绝对定位居中利⽤绝对定位居中，⾮常常⽤的⼀种⽅法。CSS:4、table-cell居中利⽤table-cell来控制垂直居中。CSS:5、flex居中CSS3中引⼊的新布局⽅式，⽐较好⽤。缺点：IE9以及IE9⼀下不兼容。CSS:6、transform居中这种⽅法灵活运⽤CSS中transform属性，较为新奇。缺点是IE9下不兼容。CSS:7、不确定宽⾼居中(绝对定位百分数)这种不确定宽⾼的居中，较为灵活。只需要保证left和right的百分数⼀样就可以实现⽔平居中，保证top和bottom的百分数⼀样就可以实现垂直居中。CSS:8、button居中利⽤button做外容器，⾥边的块元素会⾃动垂直居中，只需要控制⼀下⽔平居中就可以达到效果。HTML：CSS：
发布者：admin，转转请注明出处：http://www.yc00.com/web/1689448658a249899.html
评论列表（0条）