: Vertically and horizontally align div into parent div I'm new in the web development industry and I struggle to vertically and horizontally align a child div in a parent div. I'm trying to

@Connie744

Try CSS Flexbox: display: flex; align-items: center;

Vote Up Vote Down

@Si4351233

There are many ways that this can be achieved but the one I find most useful is to change the div display to a table cell as table cells support vertical alignment.

As an adjustment to your sample code...

HTML

<div class="img">
<div class="text">Here is my slogan</div>
</div>


CSS

.img {
margin: 0px;
padding: 0px;
border-width: 0px;
background-image: url("picture-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color: black;
min-height: 1024px;
display: table;
width: 100%;
}
.text {
text-align: center;
height: 300px;
display: table-cell;
vertical-align: middle;
}


Note the addition of display: table to the .img class and the addition of display: table-cell and vertical-align: middle to the .text class.

This has been tested and saved at jsfiddle.net/wLm5zjwx/

Vote Up Vote Down