This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want the content to be centered vertically and horizontally but it gets centered only horizontally. The problem is that I don't have fixed height.
Thank you guys for help!
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}
<div class="content">
<h1>Welcome to the website!</h1>
</div>
You can easily center an element respect to the parent in this way (assuming that the parent has position: relative;).
In your example:
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also center it in the middle of the screen using position: fixed; instead.
Follow this code
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Follow this code.
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}
<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>
Here's an example of what you need:
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
and CSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}
Related
I know this is a question that has been answered before but for some reason, I can't get anything to work. I have an image inside a div that is sticky. The image is currently aligned in the center horizontally but I can't get it to align in the center vertically. The image is stuck to the top of the div.
This is my HTML code:
<section>
<div class="stickyImg img-1">
<img src="MainImgCrop.jpeg" class="stickyImg">
</div>
</section>
And this is my CSS code:
section {
display: flex;
flex-direction: row;
}
section div.stickyImg {
height: 92vh;
background-color: purple;
background-size: cover;
background-position: center;
position: sticky;
position: -webkit-sticky;
top: 8vh;
width: 50vw;
margin: 0;
}
.stickyImg {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin: auto;
vertical-align: middle;
top: 50%;
}
Any help would be appreciated, thank you!
section {
display: flex;
flex-direction: row;
}
section div.stickyImg {
height: 92vh;
background-color: purple;
background-size: cover;
background-position: center;
position: sticky;
position: -webkit-sticky;
top: 8vh;
width: 50vw;
margin: 0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.stickyImg {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin: auto;
vertical-align: middle;
top: 50%;
}
<section>
<div class="stickyImg img-1">
<img src="MainImgCrop.jpeg" class="stickyImg">
</div>
</section>
suppose we have 4 dives.
the first div is outer div.
i want to create a HTML that
the second div size be 50% first and be in middle bottom of first div.
the third div size be 50% second and be in middle left of second div.
the fourth div size be 50% third div and be in middle top of third div.
how can i do it?
Is this your desired output? It’s made using position, top and bottom, and translate to make sure it’s centered right.
.div1 div { /* makes every small div 50% the size of the previous */
width: 50%;
height: 50%;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
background-color: green;
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.div3 {
background-color: pink;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.div4 {
background-color: lightblue;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
you can also use flex(or grid) and margin instead position :
div {
display: flex;
}
body>div {
/* sizing : whatever you want to start from */
height: 90vmin;
width: 90vmin;
background: #ed1c24;
}
div div {
height: 50%;
width: 50%;
}
div div {
background: #22b14c;
margin: auto auto 0;
}
div div div {
background: #ffaec9;
margin: auto auto auto 0;
}
div div div div {
background: #00a2e8;
margin: 0 auto auto;
}
/* center the demo */
html {
display: flex;
height: 100vh;
}
body {
margin: auto;
}
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
We can achieve this by using the CSS Flexbox and Margin properties.
index.html
<body>
<div class="firstdiv">
<div class="seconddiv">
<div class="thirddiv">
<div class="fourthdiv">
</div>
</div>
</div>
</div>
</body>
styles.css
div {
display: flex;
}
.firstdiv {
background-color: red;
width: 600px;
height: 600px;
}
.seconddiv {
background-color: green;
width: 50%;
height: 50%;
margin: auto;
margin-bottom: 0;
}
.thirddiv {
background-color: pink;
width: 50%;
height: 50%;
margin: auto;
margin-left: 0;
}
.fourthdiv {
background-color: blue;
width: 50%;
height: 50%;
margin: auto;
margin-top: 0;
}
You can use CSS flexbox below. There are four divs below and you can change the size of the first div. And then the others automatically align and resize themselves.
HTML file:
<html>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:
* {
margin: 0;
padding: 0;
}
#first {
background: #ed1c24;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
margin: auto;
}
#second {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background: #22b14c;
width: 50%;
height: 50%;
margin: 0 auto;
}
#third {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #ffaec9;
width: 50%;
height: 50%;
}
#fourth {
display: flex;
justify-content: center;
align-items: center;
background: #00a3e9;
width: 50%;
height: 50%;
}
Click to see the result of these lines of code:
Result
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
I have a div within a div that I am trying to vertically align center. I have tried vertical-align, position: relative; top: 50%, and margin: auto; to no avail. Here is the code:
.main {
font-family: "adobe-garamond-pro";
padding: 40px 0px;
color: rgba(26,26,26,0.7)
}
.intro-title {
width: 90%;
padding: 40px;
color: rgba(26,26,26,0.9);
}
.center {
margin: 0px auto;
}
.three-quarter-width {
width: 75%;
text-align: center;
}
.two-third-width {
width: 66%;
}
.half-width {
width: 50%;
}
.whitespace {
height: 7em;
}
.about {
overflow: hidden;
background-color: red;
}
.about-image {
height: auto;
float: left;
}
.about-text {
height: 100%;
float: right;
background-color: blue;
}
.inline {
display: inline;
}
.helvetica {
font-family: helvetica;
}
<div class="about three-quarter-width center">
<img src="rainbow.jpg" class="about-image half-width inline">
<div class="about-text half-width inline">
<p class="helvetica gray-spaced center">ABOUT</p>
<p class="image-text center three-quarter-width">Find out about our organization,
mission, our methods, and the results of our decades of advocacy.</p>
<p class="learn-more-button center">LEARN MORE</p>
</div>
</div>
I would like the div about-text to be vertically aligned within the div about but haven't been able to with the above methods. I'm using chrome so that might have something to do with it.
Just use css flexbox to vertical align elements.
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
/* Just for the demo */
background: red;
height: 100px;
}
.i-am-centered {
background: yellow;
}
<div class="vertical-align">
<div class="i-am-centered">
I am vertical aligned to th center
</div>
</div>