Formatting captions on hover

Hi I have added the below code to add captions on hover to my Gallery: Masonry. 

There are a couple of issues:

1. I want the font to be a bit heavier weight 

2. When the caption runs to 2 lines, it is no longer centered - it suddenly left aligns.  

I'm not a coder, so any help appreciated!

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.75); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
  
  .gallery-caption * {
    color: white !important;
    font-weight: bold !important;
    font-size: 50px !important;
  }}

#1. Add this code

.gallery-caption-content * {
	font-weight: bold;
}

#2. Can you share link to page where you use gallery?

Thanks TuanPhan, I got it working with the help of someone else.  I still haven't figured out the Lightbox issue though!

I don't see lightbox problem on your post. Can you explain?