This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I need to align container in the centre as well as in the middle of the body.
If I add margin-top it adds a white space above the container div and shifts the background image downwards too.
I would prefer everything in percentage.
body {
margin: 0px;
height: 100%;
background-image: url("../Images/LogIn/Background.jpg");
background-size: 100% 100%;
}
html {
height: 100%;
}
.Container {
margin: auto;
width: 60%;
height: 80%;
background-color: white;
border-radius: 20px;
}
<div class="Container">
</div>
Put the following styles on the bottom to align your child div in the center:
body {
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin:auto;
width: 50%
}
Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.
<style>
.container{
margin:auto;
width: 50%;
background-color: grey;
}
</style>
<body>
<div class="container">
<p> text </p>
</div>
</body>
Also as a sidenote, you should avoid styling the body at all.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Using margin:auto to vertically-align a div
(15 answers)
Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
(2 answers)
Closed 4 months ago.
Here is code:
.HUD {
height: 100%;
width: 100%;
overflow: hidden;
}
.Smart_HudWarp{
display: block;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
<div class="HUD">
<div class="Smart_HudWarp">
some elements....
</div>
</div>
I'm trying to center div inside another one, the problem is - margins doesn't show up, what i'm missing?
Although it's hard to say without the rest of the content of your html and css, i suspect the reason the auto is not working is because 100% is not considered a "static" height or width for the parent div. Margin auto doesn't actually assign a value to the margins. Instead, it allows the browser to choose the values for the margin. Browsers assign the values margin-top: 0; margin-bottom: 0; and then horizontally center the object within the parent when the shorthand property margin:auto; is given. So when you specify margin-top: auto; margin-bottom: auto; all that's being assigned is margin-top: 0; margin-bottom: 0;
a simple solution would be to use flexbox. I personally don't like using position: relative/absolute because it can be quite finicky, but that's just me. Note that flexbox comes with its own quirks, too.
.parent {
background: navy;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh; /* this makes the height a "static" value, while also covering a height equal to the whole height of the viewport */
width: 100%;
}
.child {
background: pink;
padding: 4vh;
}
<div class="parent">
<div class="child">
Hello World!
</div>
</div>
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
How can I apply horizontal align to <label> element? If I do this <label><p>3</p></label> everything works fine. I don’t understand why <p> element has auto margin (centred) when <label> is not.
html
body {
background: #2b2b2b;
font-size: 36px;
font-family: Helvetica neue, roboto;
color: white;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin: 0 auto;
background: black;
}
.common {
width: 45%
}
#div1 {
background: purple;
text-align: right;
}
#div2 {
background: orange;
}
#div3 {
background: olive;
text-align: right;
}
#div4 {
background: gray;
}
label {
}
<div class="main">
<div id="div1" class="common">1</div>
<div id="div2" class="common">2</div>
<div id="div3" class="common"><label for="name-label">3</label></div>
<div id="div4" class="common"><p>4</p></div>
</div>
By default p elements are display: block and label elements are display: inline.
margin: auto will centre a block element. It won't centre an inline element.
Use text-align: center (and not right) on the parent of an inline element (the <div> in this case) to centre the content within it.
The p element in your example, is not centred, it is left aligned. If it had margin: auto then it would be centred.
If you were talking about vertical alignment (which isn't what you said) then the p element is in the vertical centre, but that is because it has equal top and bottom margins from the user-agent stylesheet and its content height combined with the margins make it the tallest thing there. If the content in block 3 was taller, then the paragraph would be closer to the top than the bottom of its containing div.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container
div{
height: 400px;
width: 800px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Just do this, which works on every browser:
div{
height: 400px;
width: 800px;
background: red;
line-height: 400px;
text-align: center;
}
The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.
<div>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
}</style>
<h1>This is title</h1>
</div>
With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.
Good luck coding!
Here is some more information: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
.container {
display: table;
}
.centered {
display: table-cell;
height: 400px;
width: 800px;
background: red;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="centered">
<h1>This is title</h1>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.
Main content Div:
#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}
EDIT:
<div class="Serverimg">
<div class="CenterDiv">
<img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom" alt="" style="width:400px;height:300px": />
</div>
</div>
WITH CSS:
#CenterDiv {
width: 50%;
margin: 0 auto;
}
To do this you put another div inside of it and add the following CSS:
#centerDiv {
width: 50%;
margin: 0 auto;
}
What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am trying to vertically center two <p> elements.
I followed the tutorial at phrogz.net but still the elements get placed above the div, below the div, top-aligned within the div.
I would try something else but most of the questions here just point back to that tutorial.
This snippet is for a banner that is on the top of a web page.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>
How to Center Elements Vertically, Horizontally or Both
Here are two ways to center divs within divs.
One way uses CSS Flexbox and the other way uses CSS table and positioning properties.
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
CSS Flexbox Method
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
DEMO
The two child elements (.box) are aligned vertically with flex-direction: column. For horizontal alignment, switch the flex-direction to row (or simply remove the rule as flex-direction: row is the default setting). The items will remain centered vertically and horizontally (DEMO).
CSS Table and Positioning Method
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;
}
DEMO
Which method to use...
If you're not sure which method to use, I would recommend flexbox for these reasons:
minimal code; very efficient
as noted above, centering is simple and easy (see another example)
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Add the following:
display:table; to bannerRight
display:table-cell; and
vertical-align:middle; to bannerrightinner
I have not tried this, please give me feedback if it does not work. ;)
EDIT: forgot to mention: take 'float' and 'position' properties off