4 corners and center

position items in 4 corners and center of a div or of the page.

by Kai Carver

HTML

<!--<div id="parent">-->
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
    <p>Fifth</p>
<!--</div>-->

CSS

#parent {
    position:relative;
    border:3px solid blue;
    height:300px;
    width:500px;
    padding:0;
}
p {
    position:absolute;
    border:2px solid;
    margin:0;
    padding:5px;
}
p:nth-child(1) {
    border-color:green;
    top:0;
    left:0;    
}
p:nth-child(2) {
    border-color:red;
    top:0;
    right:0;
}
p:nth-child(3) {
    border-color:yellow;
    bottom:0;
    left:0;
}
p:nth-child(4) {
    border-color:pink;
    bottom:0;
    right:0;
}
p:nth-child(5) {
    border-color:blue;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}