Center play button vertically and horizontally in div

Question

I have an thumbnail of a vimeo movie (here it is a placeholder) in the center I would like a play btn.

The whole of the image will be clickable so the play button is just for illustration.

I would like the play button dead center.

I can do it with negative margins but I won't really know the size of the play button.

How can I dead center the play button with knowing it dimensions.

.video_thumbnail {
  border: 1px solid red;
  position: relative;
}

.video_thumbnail:hover {
  cursor: pointer;
}

.video_thumbnail .play-btn {
  background: white;
  background: blue;
  display: inline-block;
  padding: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  /*
            margin-left: -35px;
            margin-top: -35px;
            */
}

.video_thumbnail .play-btn:after {
  content: "";
  display: block;
  position: relative;
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

You can just do this http://jsfiddle.net/k2n4896u/3/ – Nenad Vracar Dec 07 '15 at 15:12 — Nenad Vracar, Dec 07 '15 at 15:12

score 13 · Accepted Answer · answered Dec 07 '15 at 15:13

13

You can use transform: translate(-50%, -50%);.

Jsfiddle

.video_thumbnail .play-btn {
    background: white;
    background: blue;
    display: inline-block;
    padding: 25px;
    position: absolute;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

answered Dec 07 '15 at 15:13

Alex

8,461
6
37
49

Dont forget .video_thumbnail { position: relative; } – alds Jun 23 '22 at 00:10

Center play button vertically and horizontally in div

1 Answers1