html - Attaching an object to the side of a centered div -

i want centered column of content logo attached outside of top left hand corner, in this fiddle.

html:

<div>     i'm centered     <div>         i'm glued centered div     </div> </div> 

css:

div {   background-color: pink;   width: 300px;   height: 400px;   margin: 0 auto;   position: relative; } div div {   width: 100px;   height: 100px;   background-color: cyan;   left: -100px;   top: 0px;   position: absolute; } 

i'm not satisfied own solution because seems failure of separation of content , presentation - in case cyan box logo , pink box content. can't create wrapper div both content , logo, since it's content want centered, not content , logo together.

is there cleaner way it?

you use css property display: flex

like this:

html

<div class="container">   <div class="content">     <div class="logo"></div>   </div> </div> 

css

.container {   display: flex;   justify-content: center;   flex-direction: row; } .content {   background-color: pink;   width: 300px;   height: 400px; } .logo {   width: 100px;   height: 100px;   background-color: cyan;   left: -100px;   position: relative; } 

unless i'm not getting problem is.