This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I want to center a div in the absolute center of the page with justify-content: center and align-items: center but the div needs to be the 100% width and height of the page to be in the absolute center.
The problem arrives when you add elements on top or at the bottom of the div, this reduces the height of the div that we want to center and is no longer at the absolute center.
Here is the page https://jsfiddle.net/nybf8tjc/1
I could just add
.typewriter{margin-top: -41px;}
to fix this but I feel like there is must be a better way to do this.
You can make .typewriter an absolutely positioned element and add the usual settings for centering that, like
.typewriter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
etc.
}
In action: https://jsfiddle.net/de3rf65j/
You can simple achieve it by using this.
div.father {
width: 100vw;
height: 100vw;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
}
div.father div.child {
width: 400px;
height: 250px;
background-color: teal;
position: relative;
}
<div class="father">
<div class="child"></div>
</div>
Also you can use the transform property:
div.child {
width: 400px;
height: 250px;
margin:0;
padding: 0;
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
That should center the container you want to.
Take a look https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Closed 6 years ago.
I am trying to make a horizontally and vertically centered div which does not have 100% width and height, but something like 80% both width and height. I just want to make kind of a box right in the center of the viewport. I am avoiding vh and vw units.
I found a solution like this :-
<div class="centered-box">
This is a box
</div>
And the CSS is
.centered-box {
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: 80%;
height: 80%;
border: 1px solid black;
}
This works but when I use BootStrap3's .container class, this container misbehaves. The content also overflows. I think this is due to absolute positioning of the container. I just want a completely different concept. I dont want to use this method because of absolute positioning.
Try this
<div class="centered-box">
This is a box
</div>
Css
.centered-box {
margin: 10% auto;
width: 35%;
padding: 20px;
border: 1px solid black;
}
Html
<div class="outer">
<div class="middle">
<div class="inner">
<div align="center">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
</div>
Css
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Center div it's always a pain in the a**.
I found this very usefull site: http://howtocenterincss.com/
Give it a try.
You had tio answer very simple question about what you wont to center.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I'm currently trying to center an image inside a div that has it's dimensions set with vh. I tried using the display:table-cell; method which centered the image but began messing with the vw of other elements. I was wondering if there was another simpler way to be vertically centering this image inside a div that as vh. I know this might be a little confusing so hopefully my code down below can help!
Html:
<div class="graphic" style="background-color:#ff837b">
<img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>
CSS:
#induoIntro .graphic {
display:block;
height:100vh;
}
It seems that vertical-align:middle has some inconsistency with vw unit. Try positioning approach.
Here is the solution for you.
CSS code:
.graphic {
display: block;
height: 100vh;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.graphic img {
vertical-align: middle;
width: 100%;
display: inline-block;
height: 50%;
position: absolute;
top: 0;
bottom: 0%;
margin: auto;
}
Here is the working fiddle
I tried to display vertical text exactly in center of div (navigation button) which is nested in floating element, I set size,magin:auto, vertical-align but text is on the edge against center.
Is there any other way to put the text where it should be without using absolute positioning?
<nav>
<div class="button"><p class="rotare">1st button</p></div>
<div class="button">1</div>
<div class="button">1</div>
<div class="button">1</div>
</nav>
nav {
width: 50px;
height: 600px;
background-color: red;
margin-left: 0px;
top:0px;
position: absolute;
display: inline-block;
float:left;
}
.button {
width: 50px;
height: 150px;
background-color: pink;
}
.rotare {
position: relative;
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
background-color: white;
margin:auto;
vertical-align: middle;
width: 100px;
height: 20px;
}
You can do this with absolute positioning, but without having to manually push the content into its place by simply adding these rules to your existing css:
.button {
position: relative;
}
.rotare {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here's a JS Fiddle of it in action: http://jsfiddle.net/grammar/NgrWg/
And here's an article explaining this method of vertical centering in more detail: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
EDIT - secondary approach without absolute positioning
Another approach is to use table and table-cell as the display property for the wrapper and text respectively. I've updated the fiddle to show that method as well: http://jsfiddle.net/grammar/NgrWg/1/.
Here's another article that explains this table-cell trick, and also outlines a third technique for centering things vertically: http://css-tricks.com/centering-in-the-unknown/
I am working with a div that is 100% of the parent divs height.
The div only contains a single line of text.
The div cannot have a fixed height.
So my question is.
How do I vertically center the line of text?
I have tried using:
display: table-cell;
line-height:200%;
If it is important the div is absolutely positioned.
Current CSS
.requests {
position: absolute;
right: 0;
height: 100%;
width: 50px;
padding: 0 10px;
background-color: #69A4B5;
display: table-cell;
vertical-align: middle;
border-bottom-right-radius: 5px;
}
The best and easiest way to do it (currently in 2015 2020) is using flexbox:
.parent-selector {
display: flex;
align-items: center;
}
And that's it :D
Check-out this working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
justify-content: center;
/* Actual code */
display: flex;
align-items: center;
}
<div>
<p>Hola</p>
</div>
Old answer: You can use vertical-align: middle if you specify also display: table-cell;
.div {
display: table-cell;
vertical-align: middle;
}
Working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
text-align: center;
/* Actual code */
display: table-cell;
vertical-align: middle;
}
<div>
<p>Hola</p>
</div>
If it does not work you can try setting its parent as display: table;:
.parent-selector {
display: table;
}
Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?
This answer is no longer the best answer ... see the flexbox answer below instead!
To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:
margin-top: -0.5em;
for example:
http://jsfiddle.net/45MHk/623/
//CSS:
html, body, div {
height: 100%;
}
#parent
{
position:relative;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
/* adjust top up half the height of a single line */
margin-top: -0.5em;
/* force content to always be a single line */
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:
http://jsfiddle.net/45MHk/
//CSS:
#parent
{
position:relative;
height: 3em;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
Try this one http://jsfiddle.net/Husamuddin/ByNa3/
it works fine with me,
css
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
and the html
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
Since it is absolutely positioned you can use top: 50% to vertically align it in the center.
But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:
The CSS:
div.parent {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
div.parent div.absolute {
position: absolute;
top: 50%;
height: 300px;
}
The HTML:
<div class="parent">
<div class="absolute">This is vertically center aligned</div>
</div>
I disagree, here's a JS free solution, which works:
<html style="height: 100%;">
<body style="vertical-align: middle; margin: 0px; height: 100%;">
<div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
<div style="display: table-cell; width: 100%; vertical-align: middle;">
<div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
</div>
</div>
</body>
</html>
Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.
HTML
<div class="parent">
<div class="child">Text that needs to be vertically centered</div>
</div>
CSS
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.
Working example:
http://jsfiddle.net/Qy4yy/
just wrap your content with a table like this:
<table width="100%" height="100%">
<tr align="center">
<th align="center">
text
</th>
</tr>
</table><
have you tried line-height:1em;? I recall that that's the way to get it to center vertically.
Did you try vertical-align: middle ???
You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp
Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)
I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.
No offense, but most answers in here are way off.
Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).
Modern solution - works in all browsers and IE9+
caniuse - browser support.
.v-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Example: http://jsbin.com/rehovixufe/1/