Centering a div on top of an image horizontally and vertically


I am trying to center a div and link both vertically and horizontally on top of an image and I am having trouble doing so.

This is my HTML:

<div class="row  image-header-ae-beauty-row">
				<div class="col-4 image-header-ae-beauty ">
					<div class="image-header-ae-beauty-link"><a href="#">Lorum Ipsum</a></div>
					<img src="/wp-content/uploads/2018/10/medical-aesthetic-beauty-image-1.png"  />

and this is my CSS:


	padding: 0 0 0 0;
	margin-left: -15px;

.image-header-ae-beauty img{
	position: relative

	margin-left: 15px;

	position: absolute;
	z-index: 1;
	background: #e1d2d2;
    padding: 20px;
	background: rgb(218, 193, 188); 
    background: rgba(218, 193, 188, 0.9);
	margin:  auto;
    top: 50%;
    transform: translateY(-50%);

.image-header-ae-beauty-link a{
	color: rgba(255,255,255,1);
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;

.image-header-ae-beauty-link a:hover{
	color: #85705e}

Can anyone tell me how I can get the link the the opaque box to be centered both horizontally and vertically?


1 Like

I think this is the concept your looking for.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
.caption {
  display: inline-flex; /*shrinkwrap to image native width*/
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
.caption img {
  width: 100%;
  height: auto;
.caption a {
  position: absolute;
  padding: 20px;
  background: rgba(218, 193, 188, 0.9);
  color: #fff;
  text-decoration: none;
.caption a:hover{
  color: #85705e;



<div class="caption">
  <img src="" alt="missing image">
  <a href="#">Lorum Ipsum</a>


Thank you very much :slight_smile: It worked!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.