Different centering methods

Developer
David A.
Size
7,504 Kb
Views
12,144
  1. Different centering methods Previews
  2. Different centering methods HTML Codes
  3. Different centering methods CSS Codes

How do I make an different centering methods?

Compares different vertical & horizontal centering methods I know of. Bower shots: http://app.crossbrowsertesting.com/public/id40b3d0c16e78ac/screenshots/z151532500db731c72e5?size=small&type=windowed. What is a different centering methods? How do you make a different centering methods? This script and codes were developed by David A. on 28 November 2022, Monday.

Different centering methods Previews
IQ Test

Different centering methods - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Different centering methods</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>CSS only, ver&shy;ti&shy;cal & ho&shy;ri&shy;zont&shy;al cen&shy;ter&shy;ing me&shy;thods</h1>
<h3><a target="_blank" href="http://app.crossbrowsertesting.com/public/id40b3d0c16e78ac/screenshots/z151532500db731c72e5?size=small&amp;type=windowed">see browser shots</a>&nbsp;<a target="_blank" href="http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div/6490283#6490283">stackoverflow answer</a></h3>
<div class="wrap wrap-table"> <div class="inner inner-table"> <h2>Centering with table</h2> <ol> <li>[-] .wrap needs a set width</li> <li>[-] <a href="http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables">uses table-layout</a></li> <li>[+] works everywhere also legacy browsers like IE8+</li> <li>[+] .inner width/height scales .wrap nicely with the content</li> <li>[!] conisder wrapping '.wrap' with a <br/> display:table, width: 100%, table-layout: fixed <br/>for better perf, and auto-width</li> </ol> </div>
</div>
<div class="wrap wrap-inline-block"> <div class="inner inner-inline-block"> <h2>Centering with inline-block</h2> <ol> <li>[-] font-size should be set on .inner explicitly</li> <li>[+] works for unknown dimensions of both .wrap and .inner</li> <li>[+] <a href="http://caniuse.com/#feat=inline-block">awesome browser support</a></li> <li>[+] .inner width/height scales .wrap nicely with the content</li> </ol> </div>
</div>
<div class="wrap wrap-transform"> <div class="inner inner-transform"> <h2>Centering with transform</h2> <ol> <li>[-] .inner will outgrow .wrap if content is too high</li> <li>[+] works in all modern browsers</li> <li>[+] is very nice to center icons & images</li> <li>[+] does not rely on a parent element </li> </ol> </div>
</div>
<div class="wrap wrap-flexbox"> <div class="inner inner-flexbox"> <h2>Centering with flexbox</h2> <ol> <li>[+] did not find any drawbacks with this method yet</li> <li>[+] no styles needed on the inner element</li> <li>[+] works in all modern browser</li> <li>[-] Does not work in pre flex-box borwser</li> </ol> </div>
</div>
<div class="wrap wrap-grid"> <div class="inner inner-grid"> <h2>Centering with grid</h2> <ol> <li>[+] minimal markup</li> <li>[+] no styles needed on the inner element</li> <li>[~] works in most modern browsers</li> <li>[-] Does not work in pre grid borwser</li> </ol> </div>
</div>
<div class="wrap wrap-posabs"> <div class="inner inner-posabs"> <h2>Centering with posabs</h2> <ol> <li>[+] works everywhere</li> <li>[-] need to specify the .inner width and height</li> <li>[-] .wrap will not scale when .inner grows</li> </ol> </div>
</div>
</body>
</html>

Different centering methods - Script Codes CSS Codes

/* * CSS only centering methods * * All tehniques adapt the width of .inner to * its content, max-with can be used to limit it. */
/* * table centering * * [1] Makes it possible to vertical align * [2] Since its not in a table layout, width needs to be specified * with a fall-back * [3] Centers the content vertically * [4] Centers the content horizontally * [5] Makes sure text-align and vertical-align work * [6] Resets the text-alignment to left (consider removing * if contents need to be centered as well) */
@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700i");
.wrap-table { display: table-cell; /* [1] */ width: 1000px; /* [2] */ width: 100vw; /* [2] */ vertical-align: middle; /* [3] */ text-align: center; /* [4] */
}
.inner-table { display: inline-block; /* [5] */ text-align: left; /* [6] */
}
/* * inline-block centering * * [1] Sets font-size to 0.0001px to avoid gaps between * the inline-block elements. Not 0 because IE7 and below * somehow dislike font-size 0. * [2] Centers contents horizontally * [3] Adds a before element to vertical-align the .inner element * [4] Sets pseudo element to inline-block to make sure * vertical-align works * [5] Makes sure the the element takes the full height of the wrap * [6] inner needs to be inline-block for vertical-align * [7] Resets the text-alignment to left (consider removing * if contents need to be centered as well) * [8] Sets the font-size back to the regular font-size * can be problematic when using font-size inheritance, * consider a different inline-block gap avoiding technique: * https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
.wrap-inline-block { font-size: 0.0001px; /* [1] */ text-align: center; /* [2] */
}
.wrap-inline-block:before { /* [3] */ content: ''; /* [3] */ display: inline-block; /* [4] */ vertical-align: middle; height: 100%; /* [5] */
}
.inner-inline-block { display: inline-block; /* [6] */ text-align: left; /* [7] */ font-size: 1rem; /* [8] */ vertical-align: middle;
}
/* * transform centering * * [1] needs position relative or absolute in order to use * top & left position * [2] Inline-block so the element takes the with of its content * [3] Puts the upper left corner to the center of the wrapping element * in this case % is relative to the parent dimensions * [4] translates the element back to the center. in this case % is relative * to the element it self. Use autoprefixer or something to make this * work wherever you want it to. */
.inner-transform { position: relative; /* [1] */ display: inline-block; /* [2] */ top: 50%; left: 50%; /* [3] */ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* [4] */
}
/* * flexbox centering * * [1] wrap need to be set to flex to be able to use justify-content * [2] Makes sure the contents are centered horizontally since the * default flexbox direction is set to row * [3] centers the inner element vertically */
.wrap-flexbox { display: -webkit-box; display: -ms-flexbox; display: flex; /* [1] */ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* [2] */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* [3] */
}
/* * grid centering * * [1] sets the parent to display grid * [2] Makes sure everything is centered on the x and y axis */
.wrap-grid { display: -ms-grid; display: grid; /* [1] */ -ms-grid-column-align: center; justify-items: center; /* [2] */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* [2] */
}
/* * absolute centering * * [1] sets the parent to position relative, can be absolute as well. * makes sure the inner element will be relative to this one * [2] Places the upper left corner to the center of the wrap element * [3] element needs to have set dimensions to use negative margins * [4] placed element back to the center by pushing it up and left by half its size * [5] makes sure padding is conisdered in placement * [6] by uncommenting this you can avoid 3, 4 and 5 */
.wrap-posabs { position: relative; /* [1] */
}
.inner-posabs { position: absolute; top: 50%; left: 50%; /* [2] */ height: 200px; width: 500px; /* [3] */ margin: -100px 0 0 -250px; /* [4] */ box-sizing: border-box; /* [5] */ /* transform: translate(-50%,-50%); */ /* [6] */
}
/* demo stlyes, can be ignored fo centering */
body { font-family: 'Space Mono', monospace; font-size: .9rem; line-height: 1.4; font-weight: 400; background-color: aquamarine; color: white;
}
a { color: #212121;
}
a:hover { text-decoration: none;
}
h1, h3 { text-align: center; color: white; font-weight: 200; line-height: 1.1;
}
h1 { font-size: 3.5rem; font-weight: 400; padding: 0 0.5em; font-weight: bold; font-style: italic;
}
h3 { margin-bottom: 3rem;
}
h2 { margin: -0.25em 0 .25em; font-weight: 200; color: HotPink; font-weight: bold; font-style: italic;
}
ol { padding: 0; list-style: none; margin-bottom: 0;
}
/* * code for the demo, none of this is needed its * just to visualize the different methods */
.wrap { height: 500px; min-height: 500px; background: WhiteSmoke; background: -webkit-repeating-linear-gradient(45deg, WhiteSmoke, WhiteSmoke 10px, aquamarine 10px, aquamarine 20px); background: repeating-linear-gradient(45deg, WhiteSmoke, WhiteSmoke 10px, aquamarine 10px, aquamarine 20px); color: black; border-top: .5rem solid hotpink;
}
.inner { padding: 2rem; background: WhiteSmoke; box-shadow: .5rem .5rem 0 0 hotpink;
}
Different centering methods - Script Codes
Different centering methods - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 3.5
Size 7,504 Kb
Views 12,144
Do you need developer help for Different centering methods?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David A. (meodai) Script Codes
Name
Easy Parallax, 9 lines of vanilla JS
Better Grrif Player
Social color-namer
Pseudo 3d css clouds
Media Queries on Crack
Cymk logo generator
Color palette distribution for different color spaces
Trippy perlin
Textmask over random clouds animation
We Simplify animation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!