how can set a div center of other div with CSS? - html

Question

for example i designed a div for border style and i designed another div to center of that , how can i set it to center of larger div?
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>

Answer 1

Add the following style display: flex; to the parent div and
margin: 0 auto;
align-self: center;
to the child div to align it center horizontally as well as vertically.
So the styles become:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
display: flex;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
margin: 0 auto;
align-self: center;
}
See the fiddle: "https://jsfiddle.net/ukgnnp4k/"
See the screenshot:

Answer 2

Try changing your CSS to:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
}
This link also might be helpful:
https://css-tricks.com/centering-css-complete-guide/

Answer 3

Your second div has 10px size lesser than the first one in height and width.
So to centralize the middle one add margin:5px;to the second div, Profile_Photo.

Answer 4

You can add this css.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
}
.Profile_Photo {
background-color:#005e67;
height: 80%;
width: 80%;
border-radius: 3px;
text-align:center;
margin:10px auto;
}
Use this http://jsfiddle.net/18yao91v/244/

Answer 5

.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
margin: 5px auto;
}

Answer 6

If the outer div and inner div has fixed width, then you can use css position to align inner element.
See below CSS.
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
/* alignment-adjust:middle; No need to use this. */
text-align:center;
position: absolute;
top: 5px;
left: 5px;
}
<div class="Profile_Photo_Border">
<div class="Profile_Photo"></div>
</div>

Answer 7

Here are my 2 cents, I used the display:table.cell css style:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 150px;
width: 150px;
border-radius: 3px;
display: table-cell; /*added*/
vertical-align: middle; /*added*/
}
.Profile_Photo {
background-color: #005e67;
height: 80px;
width: 80px;
border-radius: 3px;
text-align: center; /*added*/
margin: auto; /*added*/
}

Answer 8

Here's another way of centering the div inside a div irrespective of width and height - Codepen
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
position: relative;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
And a guide from CSS Tricks for centering the div.
Another guide from CSS Tricks on Flexbox which is another better way.
Hope this might help you understand better.