不知道元素宽高大小仍能实现水平垂直居中的方法有:
利用定位+margin:auto
父级设置为相对定位,子级绝对定位 ,并且四个定位属性的值都设置了0, 那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高
这里子元素设置了宽高,所以宽高会按照我们的设置来显示,但是实际上子级 的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以 上下左右都居中了
利用定位+transform
父级设置为相对定位,子级绝对定位,translate(-50%, -50%)将会将元素位移自 己宽度和高度的-50%
flex布局
display: flex时,表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中
grid布局
display: grid时,表示该容器内部的元素将按照grid进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中
需要知道元素宽高大小能实现水平垂直居中的方法有:
利用定位+margin:负值
父级设置为相对定位,子级绝对定位,top,left设置为50%
margin-left为负的自身宽度的50%,margin-top为负的自身宽度的50%
table布局
设置父元素为display:table-cell,子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中