How to center elements during a hover action in CSS - html

Question

So I'm learning CSS and I'm still getting used to being able to correctly position all the elements. Right now, I have an HTML and CSS file that draws what basically looks like the Android robot. There's an action for the head that if you hover over it, it changes its width to 300px. The problem is that the eyes become uncentered. How can I center the eyes during the hover event?
EDIT: Bonus question; in the .eyes portion of the CSS file, I was wondering why just doing display: flex centers the eyes. I thought I would have to add align_items: center to center it across the cross axis, but just doing that first bit already centers it.
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display: flex;
align-items: center;
}
.head:hover {
width: 300px;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm,
.right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
justify-content: center;
}
.left_leg,
.right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(340deg);
}
.left_eye,
.right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven't encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Robot Friend</h1>
<div class="robots">
<div class="android">
<div class="head">
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
</div>
<div class="upper_body">
<div class="left_arm"></div>
<div class="torso"></div>
<div class="right_arm"></div>
</div>
<div class="lower_body">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</div>
</div>

Answer 1

Simply try to position your eyes with margin- not with position- left:
.left_eye, .right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
margin: 0 auto; <-- make horizontal margin automatically
}
So it will still be centered even if you change element's width.

Answer 2

You can simply add this CSS code. (adjust the width as you need)
.eyes{
width:200px;
margin:0 auto;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display: flex;
align-items: center;
}
.head:hover {
width: 300px;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm,
.right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
/* This is another useful property. Hmm what do you think it does?*/
margin: 0 auto;
display: flex;
justify-content: center;
}
.left_leg,
.right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-right: 30px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg {
margin-left: 30px;
}
.right_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(340deg);
}
.left_eye,
.right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
/* These properties are new and you haven't encountered
in this course. Check out CSS Tricks to see what it does! */
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
.eyes{
width:200px;
margin:0 auto;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Robot Friend</h1>
<div class="robots">
<div class="android">
<div class="head">
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
</div>
<div class="upper_body">
<div class="left_arm"></div>
<div class="torso"></div>
<div class="right_arm"></div>
</div>
<div class="lower_body">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</div>
</div>

Answer 3

The eyes are relatively positioned. Try this, at the end of your CSS:
.head:hover .right_eye {
left: 170px;
}
.head:hover .left_eye {
left: 100px;
}