How To Center The Child Elements Beyond The Parent Element?

【 ALL RESOLVED 】(comment reference) Problem I want to centrally align figcaption below to.meter. But the frame of the parent element gets in the way and will not work out a bi

Solution 1:

What i did here is made figure > .meter absolute and figure > figcaption as relative. By doing so i can add text-align: center to the parent div and fix your centering of text issue. Now no matter how long the text is it will always be in the center the way you wanted it to be.

html { font-size: 62.5%; }

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
  }
.skillli {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  }
.skillli:last-child {
  margin-right: 0;
  }

.code {
  margin-top: 1.7rem;
  }

figure {
  margin-right: .9rem;
  margin-bottom: 2.1rem;
  font-size: 1rem;
  position: relative;
  height: 4.4rem;
  text-align: center;
  }
figure > img {
  top: 0;
  bottom: 0;
  }
figure > .meter {
  height: 4.4rem;
  position: absolute;
  /* position: relative; */transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  }
figure > figcaption {
  position: relative;
  line-height: 1;
  text-align: center;
  bottom: -5.5rem;
/*   left: 0;
  right: 0;
  margin: 0 auto; */
  }

.meter-t {
  height: 2.3rem;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  }

.PHP > .meter-t {
  width: 2.4rem;
  }

<sectionclass="skill"><pclass="title">skill</p><ulclass="data"><liclass="tool"><figureclass="Illustrator"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png"alt="advanced" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png"alt="Illustrator" /><figcaption>Illustrator</figcaption></figure><figureclass="Photoshop"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png"alt="intermediate" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png"alt="Photoshop" /><figcaption>Photoshop</figcaption></figure><figureclass="Indesign"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png"alt="elementary" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png"alt="Indesign" /><figcaption>Indesign</figcaption></figure><figureclass="Vectorworks"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png"alt="intermediate" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png"alt="Vectorworks" /><figcaption>Vectorworks</figcaption></figure><figureclass="Shade"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png"alt="intermediate" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png"alt="Shade" /><figcaption>Shade</figcaption></figure></li><liclass="code"><figureclass="HTML"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png"alt="elementary" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png"alt="HTML" /><figcaption>HTML</figcaption></figure><figureclass="CSS"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png"alt="elementary" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png"alt="CSS" /><figcaption>CSS</figcaption></figure><figureclass="Javascript"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png"alt="beginner" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png"alt="Javascript" /><figcaption>Javascript</figcaption></figure><figureclass="PHP"><imgclass="meter"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png"alt="beginner" /><imgclass="meter-t"src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png"alt="PHP" /><figcaption>PHP</figcaption></figure></li></ul></section>