CSS 实现某一个div居中显示

做项目的时候，有遇到这种居中的模块，如下图所示：



但是这个居中就不太容易实现，网上搜集的资料全是有个父级元素，然后设置什么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%);
}

高亮显示为通用代码，其余为项目需要代码，完美解决