Web-Student214 Web-Student214 - 25 days ago 11
CSS Question

css how to center horizontally and vertically

Hey im buildin this website for fun and im trying to center this icon inside its div but cant seem to do that. i tried top 50% but that doesnt work any help? the class is ion-images and i know i can send a margin-top to it but i want to know how to properly set it in the middle.

<!DOCTYPE html>
<html>
<head>
<title>ATLAS</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>

<body>
<!----HEADER------>
<header>
<div class = "header-bg"></div>
<div class = "header-wrapper">
<div class = "title-wrapper">

<h1>ATLAS</h1>
<h3>BETA</h3>
<h4>Create Professional Digital Design in any Operating System</h4>

<div id = "download"><a href = "#" id = "demo">Download Now</a></div>

</div>
</div>
</header>

<div id = "description-wrapper" class = "clearfix">
<div class = "desc-card left" id = "features">
<div id = "features-content">
<h3>The All In One Tool for Creative Designers In Any Operating System</h3>
<p>ATLAS provides users the best software to do what they do best. Design</p>

</div>
</div>

<div class = "desc-card right" id = "features-des">
<div id = "features-img">
<div class = "square first">
<div class = "img-cont">
<div class = "ion-images"> <!--Trying to center this--->
<p id = "under-img">Photo Editing</p>
</div>
</div>

</div>
<div class = "square second">

</div>
<div class = "square third">

</div>
<div class = "square fourth">

</div>

</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

<!-------------------------------------CSS---------------------------------->


body{
margin: 0;
}

.clearfix::after{
content: "";
display: table;
clear: both;
}

/*-------------------HEADER*----------------*/

header{
position: relative;
width: 100%;
height: 100vh;
}

.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(main-bg.jpg);
background-size: cover;
background-position: center;
}
.header-wrapper{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;

}

.title-wrapper{
position: relative;
width: 320px;
height: auto;
margin: 0 auto;
top: -10%;


}

.title-wrapper h1{
text-align: center;
color: white;
letter-spacing: 5.45px;
margin-bottom: -10px;
font-size:62px;
font-family: 'Raleway', sans-serif;
border-top: 3px solid white;
font-weight: 500;

}

.title-wrapper h3{
text-align: center;
color: #35E2FF;
letter-spacing: 3.45px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}

.title-wrapper h2{
color: white;
font-size: 50px;
margin-top: 80px;
font-family: 'Raleway', sans-serif;
}

.title-wrapper h4{
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-align: center;
font-size: 25px;
margin-bottom: 50px;
}

#download{
text-align: center;;
}

#demo:link{
text-decoration: none;
color: white;
border: 2px solid white;
text-align: center;
padding: 20px 40px;
text-transform: uppercase;
font-size: 25px;
font-family: 'Raleway', sans-serif;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}

#demo:hover{
background-color: #35E2FF;
}
/*------------------------------DESCRIPTION---------------*/

#description-wrapper{
position: relative;
width: 100%;
top: 0;
}

.desc-card{
position: relative;
width: 50%;
height: 450px;
margin: 0;
}

.desc-card.left{
float: left;
left: 0;
background-color: #000;
}

.desc-card.right{
float: right;
right: 0;
background-color: #282828;
}

#features-content{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}

#features-content h3{
color: white;
font-family: 'Raleway', sans-serif;
letter-spacing: 3.5px;
font-weight: 500;
font-size: 32px;
}

#features-content p{
color: white;
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: 3.5px;
}

#features-img{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}

.square{
width: 50%;
height: 50%;
}

.square.first{

}
.square.second{
background-color: #4A4A4A;
}

.square.third{
background-color: #4A4A4A;
}

.img-cont{
position: relative;
width: 100%;
height: 100%;
}

.ion-images{ /*THIS IS WHAT IM TRYING TO CENTER */
color: #35E2FF;
text-align: center;
font-size: 115px;
}

#under-img{
font-size: 25px;
color: #35E2FF;
margin-top: -10px;
font-family: 'Raleway', sans-serif;
font-weight: 300;

}

[![here is what im trying to center][1]][1]


[1]: https://i.stack.imgur.com/iBH9G.png

Answer

Try

.ion-images{ /*THIS IS WHAT IM TRYING TO CENTER */ color: #35E2FF; text-align: center; font-size: 115px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Ref:https://css-tricks.com/centering-css-complete-guide/

Comments