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%);
}

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