I'm doing an exercise and although I've centered vertically previously, in this case, I'm not being able to center it.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Add a height to the html element:
html { height: 100%; }
and it will work - the body needs space to occupy, so giving html a 100%, the body can then occupy the full 100% height.
Remove position:relative from body and it would be in center
Here is updated code
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
/*position: relative;*/
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Declare body position with 'absolute'.
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body {
position : absolute;
height: 100%;
width: 100%;
}
.search-init{
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
position : absolute;
top : 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Make it easy. Use div instead of html and boy. HTML will like this.
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
CSS
.box-table{
display: table;
height: 500px;
margin-left: auto;/* If you want to center this box */
margin-right: auto;/* If you want to center this box */
text-align: center;
width: 500px;
}
.box-table{ /* This CSS for full window */
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
body{
background-color: #ff0000;
margin: 0;
padding: 0;
}
.box-table{
background-color: rgba(0, 0, 0, 0.85);
bottom: 0;
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 17px;
position: fixed;/* You can use absolute */
right: 0;
text-align: center;
top: 0;
width: 100%;
}
.box-table-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
img{
vertical-align: middle;
}
<html lang="en">
<body>
<div class="box-table">
<div class="box-table-cell">
<img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" />
</div>
</div>
</body>
</html>
Try this
$( document ).ready(function() {
// Appears the search form input
$("#search").addClass("search-init");
}); // $(document).ready
body,html {
position: relative;
height: 100%;
width: 100%;
}
.search-init {
height: 5rem;
width: 5rem;
border: 2px solid green;
border-radius: 2.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="search">
</div>
</body>
</html>
Related
I want to center an element within a parent. That's easy enough with transform, flexbox, grid and so on...
The problem is the overflow-behavior. When the parent shrinks below the dimensions of the child, scrollbars appear. But they do not allow me to scroll to the top-left of the child. Here's what I mean:
gif animation showing window-resizing and the css behavior
This example uses flexbox for it's centering, html below:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
div.content {
flex-shrink: 0;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</main>
<footer>
</footer>
</body>
</html>
What I want to achieve looks more like this:
gif animation showing window-resizing and the css behavior
In this example I didn't use flexbox-centering. I wrapped the content within a container that has it's margin set to: 0 auto. This will achieve the wanted behavior on the x-axis, but not the y-axis. How can I achieve this on both axes?
Below the html and css of the second example using a container and auto-margin for centering:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/* display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
Ah... I hope to find a solution that doesn't use javascript for this behavior. In case I find the solution, I'll post it with a corresponding gif.
Use display: flex on the .container and margin: auto on the .content .
This is a method to solve the centering problems of flex and by this way it will center .content
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/*display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
display: flex;
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
margin: auto;
width: 600px;
height: 600px;
background-color: darkred;
}
<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I try to center the <input> element in the black <div> container, but it doesn't work. What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
An easy method is to set the position on the container to relative, then set the position on the input to absolute. Then just set the top/right/bottom/left of the input to zero, and margin to auto. No CSS3 transforms needed:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 60%;
height: 3em;
margin: auto;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
You need to use position: relative other than position: absolute, which is centering based on the entire screen other than the parent element. Note that this will make the top part of the input box in the center. You will need to move it up a little bit by half it's height.
...
main input {
position: relative;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
}
...
It should work with transform:translateY(-50%) and give the main div position:relative . Make sure to also include the different vendor prefixes.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position:relative;
}
main input {
position: absolute;
top: 50%;
left: 20%;
width: 60%;
height: 3em;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
Make main position: relative
and your input position :absolute
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
background-color: #fafafa;
width: 100%;
height: 10%;
}
main {
background-color: #000;
width: 100%;
height: 50%;
position: relative;
}
main input {
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 3em;
}
footer {
background-color: #fafafa;
width: 100%;
height: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
</head>
<body>
<header></header>
<main>
<input type="text">
</main>
<footer></footer>
</body>
</html>
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>