This question already has an answer here:
How to center an element vertically in css in a scrollable container
(1 answer)
Closed 6 years ago.
Is there any CSS technique to center an image (or any other element) within container so that:
it appears centered horizontally and vertically initially (that is, its center is in the center of the containing div, no matter the size of the content);
it can be scrolled if it overflows its containing div.
If the content is always smaller than the container, I can simply use this well-known technique:
.content {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
This works perfectly for content that 'fits' inside its container, but stops working when the content starts to overflow.
Or I can remove the top, left and transform and let the content appear in the top-left corner of the container, which is potentially fine for very large content, but looks terrible for smaller content.
So is there a way in CSS to center content and allow scrolling for both overflowing and fit content?
The closest I've come is on this fiddle:
https://jsfiddle.net/4k5vp6m6/3/
I kind of suspect that the only way to do this is to inspect the content after loading to see if it fits or not.
Flexbox can do that
.container {
position: relative;
width: 500px;
height: 500px;
border: 3px solid green;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
JSFiddle Demo
Related
I am creating a calendar and the header contains in it the names of the days of the week (su, mo...). The calendar itself scrolls while I want the header to stay fixed. This part has been simple enough using position fixed or making the calendar div contain the scroll bar.
The big issue I have is that I centered both the dates and the days of the week and the scrollbar is making the center different on the header and the content. The only workaround I found to this was to remove the scrollbar entirely, but I want the scrollbar to be visible. Is this possible?
Thanks in advance
.wrapper {
width: 100%;
.header {
position: fixed;
width: 100%;
.header-wrapper {
padding-left: 50%;
transform: translateY(-50%);
}
}
.content {
padding-left: 50%;
transform: translateY(-50%);
}
}
Here is a watered down example of my issue: https://jsfiddle.net/3hpj0s8L/
I gave the .wrapper a display: flex and justify-content: center to center all the child elements.
This makes the positioning of each child element with padding/margin and transform: translate, and even the width of the fixed element, obsolete.
Here is the updated JSFiddle demo.
I've been trying to horizontally center a wide <img> element inside a <div> which is not as wide as the image itself. And the <div> has overflow: hidden set on it.
For instance, the image is 500px wide and the DIV is 250px wide. Is there any clean way (such that it works for images of any dimension) to center the image such that only the center portion shows up inside the div.
<div class="Container">
<img class="Thumb">
</div>
And :
.Container {
position: /* anything but static */
width: 250px;
}
.Thumb {
position: relative;
width: 500px;
margin: 0 auto;
}
you can add your image as a background using css and give background position to center center.
Since you're expecting a responsive behavior, I would suggest to have (for a simple one)
div {
text-align: center;
}
But using CSS3 and media queries it is possible.
Check this out How to Create a Responsive Centered Image in CSS3
Quick demo
This question already has answers here:
Centering images in a div vertically
(3 answers)
Closed 9 years ago.
I have two columns in my HTML page.
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
Each of them occupies half of the page
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
I want to center a picture in the right column. I know that I can make it horizontally centered by doing margin-left: auto; margin-right: auto;. How can I make it vertically centered?
The first issue I see is that there is no height specified for the height of the left and right divs; height should be set to 100% or any value to your liking. To vertically center the image, we can use absolute-positioning. We would set the dimensions for the image (which is good practice in any case) and then set the top:50% and left:50% attributes. This would push the image outside the box though, so we add negative margins that are half the width and height of the image. This will vertically and horizontally align the image in a div every time!
Here's the updated CSS:
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
Take a look at this JSFiddle: http://jsfiddle.net/bYF7F/2/.
I know this question has been marked as answered, but you did mention that the height and width on the image was not ideal. So i would like to suggest another solution.
Add:
display: -webkit-flex;
display: flex;
to the right div, and:
margin: auto;
to the image. I think this is what you were after. See fiddle http://jsfiddle.net/Fqa7b/
If you use a TABLE instead of a DIV it will center automatically.
I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
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)