I'm trying to place some large text in the dead center of the page. I only want (prefer) a body tag in the page and nothing else. I've tried using display: table-cell and setting the vertical-alignment to middle but that did not work with a height: 100%
I then found another question on stackoverflow which addressed this problem but I realized it does not work with bigger font. This is what I have so far: http://jsfiddle.net/aECYS/
Push the div to top and left based on the width and height specified.
CSS
body{ background-color: #000;}
div{
background-color: #000;
width:800px;
height: 200px; line-height: 200px;
position: absolute;
top: 50%; margin-top:-100px;
left: 50%; margin-left:-400px;
font-weight: bold;
font-size: 100px;
text-transform: uppercase;
color: #ccc; text-align:center
}
DEMO
If your position is absolute then you move your text anywhere you want change your css attribute with this.
Note: Absolutely positioned elements can overlap other elements.
position: absolute;
top: 37%;
left: 34%;
See Demo
Set width and height as 100%
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
Then the text center with the different screen size
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
is the best way, choose your class though here.
Related
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
Displaying the data in exact centre of the page in html?
The data should be equally distance from all sides?
CSS:
.center {width:200px;margin:0px auto;}
HTML:
<div class='center'>Your Content</div>
Note that your content must have a specific width (px, %,em, etc.) to be centered using this method.
Fiddle
You can do it this way.
see http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
<div class="main">it is content</div>
<style type="text/css">
.main{ top: 50%; left: 50%; position: absolute; margin-top: -50px; margin-left: -100px;}
</style>
You can use table as wrapper of element that holds content and set align='center' valign='middle' attribute of wrapper table and table should fit to page.
You can use a container with position: relative; that holds the centered element with position: absolute; in order to get vertical centering, here's the code:
#parent {
position: relative;
width: 500px;
height: 500px;
background: #000;
}
#child {
position: absolute;
width: 50%;
height: 50%;
background: #aaa;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
Here is a JS Fiddle for this.
I want to have a big image that has a width of 100% and a height of about 70% of the screen. On this image I want some text ontop of this image and this text needs to go right in the middle of the image. In a nutshell: how can I center horizontal and vertical this text in a 100% width image?:
<div id="top-area">
<img src="img/startphoto.jpg" alt="background image #1" />
<p>Some text</p>
</div>
#top-area img{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p{
position: relative;
text-align: center;
margin-top: 330px;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
I know I use margin-top to get the horizontal place of the text, but this feels like the wrong way. Anyone got beter suggestions?
You could assign position:absolute to the img and p element. You would then declare top:40%; on the p element to vertical centralise it. The reason I use 40% is due to the size of the text you're using. You could use 50% and then with javascript calculate the height of the text and assign a top negative margin to it. This is only required if your text height will vary dynamically.
DEMO http://jsfiddle.net/fRbNe/
html, body {
height: 100%;
}
#top-area {
position: relative;
height: 70%;
width:100%;
}
#top-area img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p {
margin:0;
padding:0;
text-align: center;
top:40%;
height: 100%;
width:100%;
position: absolute;
color: white;
font-family:'Montserrat', sans-serif;
font-size: 3em;
}
Here is your code refactored to work. It makes the top-area the one that determines the size of the image as the image just fills the space. Then centers the text by moving it left and top 50% of the top-area's size and then translating it back 50% of the p's size. This is a sure fire way for any sized image and any size of text.
<div id="top-area">
<img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" />
<p>Some text</p>
</div>
#top-area {
position: relative;
width: 100%;
height: 70%;
}
#top-area img{
width: 100%;
height: 100%;
}
#top-area p{
position: absolute;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}
Codepen to see it working:http://cdpn.io/zFJgh
I believe Travis's answer would require browser support for background size which is still lacking for IE8. Something like this should work though, placing both the image and a span in a div:
div.largeImageContainer,
img.largeImage{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
div.largeImageContainer{
top: 30%;
text-align: center;
}
span.largeImageText{
position: relative;
top: 50%;
line-height: 16px;
margin-top: -8px;
}
All the proposed solutions so far aren't "ideal".
First of all if your image does not belong to the content itself, do not use an image element. Instead apply it as a background-image.
Using the new CSS3 background options you can additionally set e.g. the background-size, -clip, -origin and so on ...!
And to horizontally and vertically centering your text in the element, simply set its display value to 'table-cell' and 'text-align: center' and 'vertical-align: middle' - that's it.
<div id="top-area">
<p>Some text</p>
</div>
html, body {height: 100%;}
#top-area {
display: table;
width: 100%;
height: 70%;
border: 1px solid red;
/*background-image: ... */
}
#top-area p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
See jsFiddle
Browser Support: IE 8+ and all "modern" browsers
PS: The "modern way" will be using Flexbox
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}
I want to place div that has absolute position in center of the screen view (scrolled or not scrolled).
I have this but its places div in mid od the document and not mid of current view.
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
margin-left:-70px;
margin-top:-50px;
}
Use the following CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Change position:absolute to position: fixed and you should be good to go!
When you say position - absolute, the reference div is the parent div that has a position - relative. However if you say position -fixed, the reference is the browser's window. which is wat you want in your case.
In the case of IE6 i guess you have to use CSS Expression
If you don't want to change your element's position to fixed, here is a solution with keeping your element absolut.
Since CSS's calc() is supported by all browsers now, here a solution using calc().
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
}
A bit more complex way is to use multiple outer boxes. This method works well with or without hard coded width/height of the middle box (background colors added just to show what each box does):
/* content of this box will be centered horizontally */
.boxH
{
background-color: rgba(0, 127, 255, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* content of this box will be centered vertically */
.boxV
{
background-color: rgba(255, 0, 0, 0.2);
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
/* content of this box will be centered horizontally and vertically */
.boxM
{
background-color: lightblue;
padding: 3em;
}
<div>
some text in the background
</div>
<div class="boxH">
<div class="boxV">
<div class="boxM">
this div is in the middle
</div>
</div>
</div>
https://jsfiddle.net/vanowm/7cj1775e/
If you want display div in the middle regardless of the scroll position, then change position to fixed
Here is a solution using margin and position: fixed :
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
It centers the div by increasing the margin on all sides to fit the whole screen.
EDIT: I found out there is a shorthand for top,right,bottom,left that is inset. It has been implemented in major browsers and you can see the compatibility on other browsers here
So to absolutely center a div on a screen:
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
inset: 0;
}
I managed to place absolutely positioned text in the center with the following:
position: absolute;
text-align: center;
left: 1%;
right: 1%;
This is a variation of the answer from Kenneth Bregat. It maintains absolute positioning rather than fixed, plus it solves text wrapping issues mentioned in some answers. Don't forget that the parent will need relative positioning.
What about this trick:
position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;
margin-left: -half_of_the_div;
left: 50%;
position: fixed;
example on codepen