This question already has answers here:
Setting CSS top percent not working as expected
(4 answers)
"top" CSS property has no effect when using a percentage
(4 answers)
Closed 3 years ago.
So I am just fiddling for some curiosity on jsFiddle.
When I apply style on below HTML:
<p>Hello World</p>
Styles:
p {
position:relative;
top: 50%;
left: 50%;
}
The Hello World comes to the center horizontally but not vertically.
But , when I change the position from relative to absolute,
the element aligns horizontally and vertically as well.
As I understand positioning, top: 50% should change the top of a block element.
Anything I am missing here (conceptually or otherwise)?
p {
position:relative;
top: 50%;
left: 50%;
}
<p>Hello World</p>
For position relative, it parent should have an static height. As I assign height to body it worked!.
p{
position:relative ;
top : 50%;
left : 50%;
}
body{
height:100vh;
}
<p>Hello World</p>
I have this kind of problem lot of time and to use position absolute some times are not a good idea so I have always used flex css.
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
for p no css is required.
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
My CSS code has two squares, green (small, child) and red (big, parent). I want to hide the lower half of small box under big box so that no overlap is visible.
My following code doesn't work but if I remove z-index on the red box, it works.
I can't understand this behaviour. As per my understanding, any -ve z-index on the child will take it below the parent no matter what the z-index on the parent is.
Is it incorrect?
.parent {
background:red;
height: 100px;
width: 100px;
position: absolute;
z-index:1;/*comment this line to make it working*/
}
.child {
height: 10px;
width: 10px;
position:absolute;
background:green;
top: 0%;
left: 50%;
transform: translateY(-50%);
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>
Expected result:
By giving the parent element a z-index of its own you establish a new stacking context.
This causes the z-index of the child to be scoped to inside the parent instead of scoped to the html element.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I am styling a page with flexbox. I had a nicely centered image inside a div with a background image.
body {
width: 700px
}
nav {
width: 100%;
height: 50px;
background-color: #ccc
}
.wrapper,
.banner {
display: flex
}
.wrapper {
flex-direction: column
}
.banner {
background-image: url("https://unsplash.it/1000/600/?random");
background-repeat: no-repeat;
background-position: center center;
height: 300px;
}
.banner img {
height: 140px;
width: 140px;
border-radius: 140px;
border: 3px solid #fff;
align-self: center;
margin: auto;
}
<nav>
</nav>
<article class="wrapper">
<section class="banner">
<img id="profile-pic" src="https://unsplash.it/100/100/?random" />
</section>
</article>
See this codepen:
https://codepen.io/efbbrown/pen/PmOpWo
Now I want to add an x button so the user can change the background image if they please. When I add the button div it pushes the centered image out of position.
Added element:
<section class="banner">
<div class="close-button"></div>
<img id="profile-pic" src="https://unsplash.it/100/100/?random"></img>
</section>
See this codepen for full dilemma:
https://codepen.io/efbbrown/pen/PmOpOq
How can I add this x button to the div without changing the positioning of the center image?
Thanks!
Flex box will change the position and width of items based on the number of items contained inside the flex element. This means that when you add the close button, your banner image is now centering based on the remaining space, not the full width. You can "remove" an item from the flexbox formatting by changing it's position to absolute. That element is now ignored by the flexbox, as it will position it's self.
This should do the trick:
.banner {
/* ... */
position: relative;
}
.close-button {
/* ... */
position: absolute;
/* ... */
}
EDIT
Answer to questions from the comments below: Absolute positioning is not always determined by the width and height of the screen or window. It's actually determined by the closest 'positioned' parent, for example a parent marked as position: relative.
Using relative and absolute together is where absolute position really works well. In this example you can mark the banner class as position relative and wherever you move that div to, the close button will follow and position based on the banner div.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I am facing a problem, how to center text (h1) inside div. I want the web page to be full screen and i achieved that with vh units.
.page { height: 100vh;
width: 100%;}
On that page i want div to be centered horizontally and vertically. I tried with
.div { top: 50%;
left: 50%;}
but that just didnt do the trick. I also want this to be "resposive" si that it is centered on any screen.
I am looking to build something like this: http://www.anthonygoodisondesign.com/
use css code as below;
div{height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
<div> <h1>center me</h1></div>
Use this:
text-align: center;
position: relative;
top: 40vh;
transform: translateY(-50%);
https://jsfiddle.net/yak613/pLb8aysd/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS height 100% in IE7
I'd like to have a centered block on a webpage that's filled to 100% by a child div.
Here is my HTML code:
<div id="parent">
<div id="child"></div>
</div>
Here is my CSS:
#parent {
position: absolute;
background-color: blue;
top: 2em;
left: 4em;
bottom: 3em;
right: 2em;
}
#child {
position: relative;
background-color: red;
height: 100%;
}
And here is a JSfiddle:
http://jsfiddle.net/XMS2G/1/
The problem is that in Internet Explorer 7, the browser does not cause the child div to expand to the entire parent div. How would I accomplish this without using Javascript?
Consider using position:absolute for child as well. And then just use top:0px; bottom:0px; right:0px; left:0px;
I think it will work.
You need to give the child position: absolute and set left, right, top, bottom to 0.
See it in action.
You'll likely have to set a hard-coded width for the parent DIV to get IE7 to behave nicely. the centering can be done with the "margin-left: auto;" "margin-right: auto;" css.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)