方法一:flex布局

注意:是父元素设置flex
结果:

方法二:子绝父相,子元素top,bottom,left,right为0 margin:auto

结果:

方法三:子绝父相,子元素top,left为50%,transform: translate(-50%, -50%)

结果:

方法四:子绝父相,如果子元素宽、高已知,子元素top,left为50%,margin-top、margin-left分别向上和向左移动子元素宽高的一半

结果:

注意:是父元素设置flex
结果:
结果:
结果:
结果:
本文标题:CSS元素垂直水平居中的几种方法
本文链接:https://www.haomeiwen.com/subject/zxlmmhtx.html
网友评论