Responsive CSS Square Box

Simple css code that helps you to create responsive square box for web page.
Css Code:
<br /> </style><br /> .square-box{<br /> position: relative;<br /> width: 50%;<br /> overflow: hidden;<br /> background: #4679BD;<br /> }<br /> .square-box:before{<br /> content: "";<br /> display: block;<br /> padding-top: 100%;<br /> }<br /> .square-content{<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> bottom: 0;<br /> right: 0;<br /> color: white;<br /> }<br /> .square-content div {<br /> display: table;<br /> width: 100%;<br /> height: 100%;<br /> }<br /> .square-content span {<br /> display: table-cell;<br /> text-align: center;<br /> vertical-align: middle;<br /> color: white<br /> }<br /> </style><br />
Body Content:
<div class='square-box'><br /> <div class='square-content'><div><span>Responsive CSS Square Box</span></div></div><br /> </div>