How can I center something if I don't know ahead of time what the width is?
Here's how to do it using a style sheet.
Style sheet:
div.center-content
{
text-align: center;
}
div.center-content p
{
text-align: left;
margin-left: auto;
margin-right: auto;
}
HTML:
<div class="center-content">
<p>Lorem ipsum dolor sit amet</p>
</div>
Align a DIV tag without knowing the width
I usually use width:auto
or width:100%
than margin:0 auto
;
However you can see the details on the link below as its almost the same question as yours!
How can I center align a div without knowing the width?
Center fixed div with dynamic width (CSS)
You can center a fixed
or absolute
positioned element setting right
and left
to 0
, and then margin-left
& margin-right
to auto
as if you were centering a static
positioned element.
#example {
position: fixed;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}
See this example working on this fiddle.
Centering an div which overflows it's parent within another centered div
#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
Having trouble vertically centering a dynamic image
First at all you don't need the <div>
for table-row you can work only with the table-cell
, to solve the align issue assign the height:100%
for the table and table-cell:
.table {
height:100%;
display: table;
margin: 0px auto;
}
.table_cell {
height:100%;
display: table-cell;
vertical-align: middle;
}
Check this Demo Fiddle
How to center a p element inside a div container?
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
Align a div to center
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
How can I center text (horizontally and vertically) inside a div block?
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Update for 2020:
Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:
#container {
display: flex;
justify-content: center;
align-items: center;
}
To specify a fixed width for the child, which is called a "flex item":
#content {
flex: 0 0 120px;
}
Example: http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
Example: http://jsfiddle.net/2woqsef1/2/
The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
Update for 2016 / 2017:
It can be more commonly done with transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:
position: relative;
top: 50%;
transform: translateY(-50%);
Example: https://jsfiddle.net/wb8u02kL/1/
To shrink-wrap the width:
The solution above used a fixed width for the content area. To use a shrink-wrapped width, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example: https://jsfiddle.net/wb8u02kL/2/
If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height
method would work. Otherwise, flexbox would do the job.
Related Topics
Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre
Skew Background Image on One Side with a Border
CSS 2 Div Size Auto Same Height
How to Draw Multiple Horizontal Lines (Notebook Paper Effect) Using CSS
Css/Tables: Parallel Two Columns for Different Languages
How to Display Source Code with Indent in a Web Page? HTML? CSS
Last-Child:After Not Rendering in Chrome? Pseudo-Element Use Issue
Page Break Is Not Working with the Tbody Issue
How to Make Flash Animation Responsive
Codesandbox.Io <Img> Tag Not Loading Image
Setting Width:Auto Leads to Width:100%
Move One Image Inside Other Image
Table Row Won't Contain Elements with Position:Absolute
How to Display Previous and Next Images with a Bootstrap Carousel
Restoring the Value of a Input Type=File After Failed Validation