Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question.
This is my CSS code:
.question {
position: absolute;
min-height: 100%;
min-width: 100%;
}
#titlepage{
position: relative;
top: 30%;
width: 50%;
text-align: center;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
html, body {
background-color: #A0B8C8;
height:100%;
width:100%;
}
<body ontouchmove="BlockMove(event);">
<div class="question">
<div id="titlepage">
<h1> test data </h1>
</div>
</div>
The objective is for the #titlepage div to be positioned at 30% from the top and centered horizontally.
Currently, it is properly positioned vertically but not centered horizontally due to the margin auto style not applying correctly.
I would appreciate any assistance in resolving this issue, along with an explanation.
Thank you!
*Update: I have included the HTML code, but it does not seem to work as intended. Could there be something overriding it?
**Update: I managed to solve the issue by adding right: 0; left: 0; to the CSS, resulting in the following code:
.titlepage{
position: absolute;
top: 30%;
width: 50%;
text-align: center;
margin: 0 auto;
right: 0; left: 0;
}
If anyone can explain why this fix worked, I would greatly appreciate it.