子父元素宽高未知情况下垂直水平居中方法

1. 相对于屏幕可视区域垂直水平居中

方法一:

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

方法二:

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;

2. 相对于父元素垂直水平居中

方法一:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
// 父元素需设置position:absolute 或 relative 或 fixed

方法二:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// 父元素需设置position:absolute 或 relative 或 fixed

已上css样式均设置在子元素上
整理了一下,希望可以帮助到大家~

你可能感兴趣的:(css)