Centering in CSS, when the object is larger than the viewport
Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:
div.wrapper {
position: absolute;
left: 50%;
}
.content {
position: relative;
margin-left: -50%;
}
<div class="wrapper">
<div class="content">JQUERY BIZ-NASS HERE</div>
</div>
Of course, this assumes that your div here is a direct descendant of the body
tag, and that your browser specifies body
to have a width of 100% and no margin or padding.
Make a div center of viewport - Horizontally and vertically
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
Demo: http://jsfiddle.net/fJtNQ/
Why is this working?
Well, basically you have an absolute positioned element inside the dom. It means that you can position it wherever you want and if you don't have a relative positioned element as parent, left and top will be the distance from the document's left/top origin.
Assigning left:50%
and top:50%
enables this element to be positioned always in the center of the screen, but in the center you will find the top left corner of the element.
If you have fixed width/height, you can easily 'translate' the point in the center to be actually the center of the wrapper div by giving negative margin-left
and margin-top
(therefore with the help of some extremely easy basic math their values will be -(width/2)
and -(height/2)
)
EDIT
You can also easily center by using flexbox
, plus (a big one) you don't need to specify w/h, i.e.:
body { /* can also be whatever container */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#wrapper {
/* whatever style u want */
}
demo: https://jsfiddle.net/00utf52o/
Center a position:fixed element
If your div has a known width and height, then you basically need to set top
and left
to 50%
to center the left-top corner of the div. You also need to set the margin-top
and margin-left
to the negative half of the div's height and width to shift the center towards the middle of the div.
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
Or, if your div has a dynamic/undefined width and/or height, then instead of the margin
, set the transform
to the negative half of the div's relative width and height.
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Or, if your div has at least a fixed width and you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0
and right: 0
to the element having a margin-left
and margin-right
of auto
, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.
Viewport Centered div Alignment
To achieve expected result, use below
HTML:
<div class="card">
<div class="content">
Main Content
</div>
<div class="reference">
Reference Content
</div>
</div>
CSS:
body {
background: rgb(0, 14, 32);
color: white;
font-size: 2em;
display: table;
width:100%;
text-align:center;
}
.card {
height: calc(100vh);
display: table-cell;
vertical-align: middle;
margin: auto;
}
.content {
text-align: left;
border: solid white;
}
.reference {
text-align: right;
font-size: 0.5em;
border: solid blue;
}
Codepen- https://codepen.io/nagasai/pen/qmVKjB
Related Topics
Susy 2.0 Change Columns at Breakpoint
How to Use Sass/Scss in Angular Application
CSS Columns: Target Last Child in Each Column
CSS Select Second Level Elements
Import CSS Selector Styles in Another Selector? (Not @Import)
Why Is "Border-Color" Overridden by "Color"
Two Vertical Divs Within a 100% Height Div
Div Not Visible in HTML and CSS
How to Create a Row of Justified Elements with Fluid Spacing Using CSS
Floated Element Gets Outside of Its Parent
Centering in CSS, When The Object Is Larger Than The Viewport
How to Create a Child Theme in Wordpress
How to Change The Color of The Text Cursor in an Input Field in Ie
How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners
CSS Background Gradient Validation
What Tool How to Use to Test The: Contains() CSS3 Pseudo-Class in a Browser
How to Center Text Horizontally and Vertically in Cojunction with 'Writing-Mode: Sideways-Lr'