How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks!

.template-banner{
width: 100%;
height: auto;
margin: 0;
}
.template-banner-wrpr{
width: 100%;
height: 500px;
}

.template-banner-img {
content: url("../img/template-banner.jpg");
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr1{
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr{
width: 100%;
position: absolute;
top: 50%;
right: -50%;
    margin: 0 auto;
    height: 500px;
}
.tbanner-reg-desc-wrpr{
width: 680px;
float: left;
height: 285px;
}

.tbanner-reg-input{
width: 270px;
float: left;
background-color: rgb(247,247,247);
border-radius: 5px;
padding: 10px 25px 25px 25px;
height: 250px;
}
.tbanner-reg-input p{
font-size: 20px;
font-weight: bold;
}

.tbanner-loginb{
background-color: #ff3b30;
border: solid #ff3b30 1px ;
border-color: #ff3b30;
color: white;
font-weight: bold;
}

.tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb {
width: 100%;
padding: 10px;
margin: 5px 0px 10px 0px;
border-radius: 5px;
border-width: 1px;
border-style: line;
border-color: rgb(249,249,249);
}


.template-features {
width: 100%;
height: auto;
text-align: center;
background-color: rgb(246,244,245);
}
<div class="template-banner">
<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
<div class="tbanner-reg-wrpr">

<div class="tbanner-reg-desc-wrpr">
<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
</div>
<div class="tbanner-reg-input"><p>Registration/Image</p>
<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
</div>
</div>
</div>

Expected Result

htmlcss

Answer №1

When using absolute positioning at 50% from the top and left, it utilizes 50% of the container to position the child element. However, applying a transform to translate the element -50% from both the top and left will use 50% of the element's own dimensions, resulting in a centered element.

Creating a two column layout can be accomplished easily with various methods like inline-block, grid, flexbox, or a simple float, which typically requires minimal CSS.

.container {
  background-image: url(http://farm5.staticflickr.com/4615/24977545657_f984bbaec2_b.jpg);
  height: 400px;
  border: 5px solid black;
  position: relative;
}

.content-wrapper {
  min-height: 100px;
  height: 100px;
  max-width: 80%;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 5px solid red;
}

.content-wrapper div {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  float: left;
  background: #fff;
}

.left-column {
border: 5px solid orange;
}
.right-column {
border: 5px solid cyan;
}
<div class="container">
  <div class="content-wrapper">
    <div class="left-column"></div>
    <div class="right-column"></div>
  </div>
</div></ul>

Answer №2

Here is the solution to rectify your problem

I made adjustments to the top and left properties of tbanner-reg-wrpr and included 

transform: translate(-50%, -50%);

Additionally, change the position property of .template-banner to relative

.template-banner{
width: 100%;
height: auto;
margin: 0;
    position: relative;
}
.template-banner-wrpr{
width: 100%;
height: 500px;
}

.template-banner-img {
content: url("http://lorempixel.com/g/400/200/");
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr1{
width: 100%;
height: 500px;
}
.tbanner-reg-wrpr{
position: absolute;
top: 50%;
left: 50%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    background: #0000006b;
}
.tbanner-reg-desc-wrpr{
width: 200px;
float: left;
height: 285px;
}

.tbanner-reg-input{
width: 270px;
float: left;
background-color: rgb(247,247,247);
border-radius: 5px;
padding: 10px 25px 25px 25px;
height: 250px;
}
.tbanner-reg-input p{
font-size: 20px;
font-weight: bold;
}

.tbanner-loginb{
background-color: #ff3b30;
border: solid #ff3b30 1px ;
border-color: #ff3b30;
color: white;
font-weight: bold;
}

.tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb {
width: 100%;
padding: 10px;
margin: 5px 0px 10px 0px;
border-radius: 5px;
border-width: 1px;
border-style: line;
border-color: rgb(249,249,249);
}


.template-features {
width: 100%;
height: auto;
text-align: center;
background-color: rgb(246,244,245);
}
<div class="template-banner">
<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
<div class="tbanner-reg-wrpr">

<div class="tbanner-reg-desc-wrpr">
<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
</div>
<div class="tbanner-reg-input"><p>Registration/Image</p>
<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
</div>
</div>
</div>

Answer №3

Check out my JSFIDDLE

<div class="container">
  <div class="main">
     <div class="top"></div>
     <div class="bottom"></div>
  </div>
</div>

Here is the CSS code:

.container{border:1px solid blue;width:100%;height:250px;display:flex;justify-content:center}
.main{width:220px;border:1px solid blue;margin:30px;display:block;display:flex;justify-content:center}
.top{border:1px solid purple;width:45%;display:inline-block}
.bottom{border:1px solid orange;width:45%;display:inline-block}

I have utilized flexbox for this layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

What could be the reason for Selenium refusing to accept dynamic variables in this specific function?

What is the reason for the difference in behavior between these two code snippets? monday_div = driver.find_element(By.XPATH, '//*[@id="GXPMonday"]') And why does this one not work as expected? weekdays = ['Monday', 'Tue ...

pythonhtmlselenium

What is the reason for the malfunction of input :: - webkit-slider-thumb and input :: - moz-slider-thumb?

Designing a compact slider for enhancing user experience not limited to webkit browsers requires utilizing a scss template such as input { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 1vm ...

css

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

Issue with data binding in file upload field

I am currently working on a project using Asp.Net Core MVC. In the model, there is a property called IFormFile. While using a basic input tag, everything works perfectly fine. However, when I tried to implement the file input plugin from this URL, the mode ...

htmlasp.net-coremodel-view-controllerbootstrap-5

The jQuery attr() method is universally compatible across platforms and stands independent

I have a jQuery statement that is currently working for me, but I am unsure if it is cross-platform independent. Can anyone confirm? $("input[name='confirmed']").attr("checked",false); It is functioning correctly on the latest version of Firefo ...

jqueryhtmlcssdhtmlattr

Getting the next sibling element with Selenium: A complete guide

Having trouble targeting a textbox after the label "First Name" in a list to enter a first name. Here's what I've tried: WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::d ...

javahtmlcssseleniumautomation

Is it possible to customize the default styling options in Tailwind?

I am currently working on a blog using NextJS, and I have encountered an issue with Tailwind's list style type. It seems that the default styling for list style type is set to list-none, resulting in my <ul> <li> elements not being styled ...

htmlcssnext.jshtml-liststailwind-css

Utilizing HTML templates in Express instead of Jade

Currently in the process of setting up a new MEAN stack project, with Angular as my chosen front-end framework. I am aiming to utilize HTML files for my views in order to incorporate Angular within them. However, I am facing challenges when attempting to s ...

javascripthtmlangularjsnode.jsexpress

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

How can I display a preview of another page within a div container without actually making the text clickable? I want the preview to show when the mouse hovers over specific text, but I need the original text to stay on the main page. I've experiment ...

javascriptjqueryhtmlcss

Unable to confirm authenticity of dynamic form using PHP

I seem to be encountering an issue while attempting to validate my dynamic HTML form using a PHP script. Upon clicking submit, I receive an error stating that there is an undefined index, even though the index is clearly defined. What sets my query apart f ...

phpjqueryhtml

Troubleshooting my HTML5 local storage issues for optimal functionality

I've been working on using HTML5's localstorage to save two variables and load them upon page refresh, but I seem to be encountering some issues when trying to load the saved items: Variables in question: var cookies = 0; var cursors = 0; Savi ...

javascripthtml

The pure JavaScript function for changing the background color in CSS is not functioning properly

I'm having trouble understanding why the color does not change after clicking. Can anyone explain? function butt(color) { if(document.getElementById("bt").style.backgroundColor=="green"){ document.getElementById("bt").style.backgrou ...

javascripthtmlcss

The html function does not contain the value of the textarea

While attempting to retrieve the HTML content of a div using the code below, I noticed that it does not include the text entered in the textarea or input field. var mywindow = $(printDiv).html(); The variable mywindow will contain all the HTML except fo ...

javascriptjqueryhtml

Verify the presence of a specific select option using text in jQuery version 1.7

Looking at the following snippet of HTML: <select id="sel"> <option value="0">Option1</option> <option value="1">Option2</option> <option value="2">Option3</option> <option value="3">Option4</option> & ...

javascriptjqueryhtmljquery-selectors

Retrieving text content from the h1 element's class name

Trying to extract the text 'getthis' using the agility pack. <h1 class="point">getthis< span class="level">Niveau 0</span> </h1> Tried methods: var links = webBrowser1.Document.GetElementsByTagName("point"); foreach ...

c#htmlhtml-agility-pack

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

Image link in HTML / CSS not functional on one half of the image

My webpage has an image thumbnail with accompanying text positioned to the right. I have a hyperlink on the image that should open the full-size version when clicked. However, there seems to be an issue where the hyper link only activates on the lower hal ...

htmlcss

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

javascripthtmlangularjs

Is there another way to retrieve a marketplace's product details using code?

When it comes to scraping products from various websites, I have discovered a clever method using window.runParams.data in the Chrome console. This allows me to easily access all the information without having to go through countless clicks to extract it f ...

javascriptpythonhtmlweb-scraping