做项目的时候,有遇到这种居中的模块,如下图所示:
但是这个居中就不太容易实现,网上搜集的资料全是有个父级元素,然后设置什么postion:relative 子元素设置position:absolute等等
但是我这个父级元素是在feed流里面,就是很难实现对整个屏幕设置成relative等等,所以进行设置比较困难。
所以这个中奖名单要单独脱离文档流设置为fixed的
然后相关设置如下,
.winnerBody { position: fixed; width: 420px; top: 50%; left: 50%; background: #ffffff; box-shadow: 0 0 10px #d0d0d0; border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; border-bottom: 2px solid #d0d0d0; border-top: 2px solid #ff6600; border-radius: 4px; z-index: 1127; /* min-width: 300px; */ text-align: left; font-size: 14px; font-family: "Microsoft YaHei", Arial, sans-serif; outline: 0; -moz-outline: 0; -webkit-animation: winners-YBzoomIn-23e4n .25s linear; -o-animation: winners-YBzoomIn-23e4n .25s linear; animation: winners-YBzoomIn-23e4n .25s linear; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
高亮显示为通用代码,其余为项目需要代码,完美解决