元素居中的办法 trasform:translate

元素水平垂直居中代码 设置元素上下居中

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

position: fixed;
top: 50%;
right: 0;
background: red;
transform: translateY(-50%);

position: fixed;
background: red;
top: 50%;
right: 50%;
transform: translate(-50%,-50%);

  

position: fixed;
right: 0;
background: red;
top: calc((100% - 元素的高度)/2);

总结：trasform:translate(-50%,-50%)除了可以水平垂直居中，还可以根据屏幕的大小来调节自身的宽度，做弹框时不用设置宽高，缺点是修正幅度过大，就会导致dom元素尤其是文字出现模糊

解决办法   1把父元素设置为.parent{display:flex;justify-content:center; align-items:center; }     2 把该高宽为偶数 

posted @ 2022-09-30 16:19  搲社会主义墙角  阅读(25)  评论(0)  编辑  收藏  举报