margin:auto与绝对定位元素的水平垂直居中

HTML

<div class="father">
    <div class="son"></div>
</div>
					    

CSS

.father {
    width: 300px; height: 150px;
    background-color: #f0f3f9;
    position:relative;
}
.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    background-color: #cd0000;
    margin: auto;
}
					    

JS

//no