<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Easy vertical/horizontal centering and aligning (Flexbox)</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="container no-bootstrap-padding content-center-hori">
<p>
an object horizontally
centered according
to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-center-vert">
<p>
an object vertically
centered according
to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-center-center">
<p>
an object horizontally & vertically
centered according
to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-center-end">
<p>
an object vertically
centered and aligned to right (end) according
to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-center-bottom">
<p>
an object horizontally
centered and aligned to the bottom according
to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-right-bottom">
<p>
an object aligned to the right and bottom
according to it's parent
</p>
</section>
<section class="container no-bootstrap-padding content-inherit-height" id="growing-section" :class="{ grow : growSection }">
<p>
<span>bonus: </span>
child inherits height of parent,
even if the parent changes according
to changing content. click button to see it happen.
</p>
<button @click="growSection = !growSection">grow parent</button>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/easy-verticalhorizontal-centering-and-aligning-flexbox-vWxLVE */
/* not relevant to centering / aligning */
section,
p {
border: 1px solid black;
}/*--adds borders to paragraph and sections*/
section {
height: 100px
}/*--adds height to sections*/
p {
margin: 0px;
}/*--removes paragraph default margin*/
.no-bootstrap-padding {
padding: 0px;
}/*--removes bootstrap default 15px gutter / padding*/
span {
font-style: bold;
color: red;
}
button {
height: 50px;
background-color: lightblue;
border: 2px solid blue;
border-radius: 5px;
margin-left: 10px;
margin-top: 10px;
text-transform: uppercase;
}
.grow {
height: 200px;
}
/* not relevant to centering / aligning */
/*-----------------------------------------------*/
/*centering / aligning classes below */
.content-center-hori {
display: flex;
align-items: flex-start;
justify-content: center;
}/*--centers children horizontally only*/
.content-center-vert {
display: flex;
align-items: center;
}/*--centers children vertically only*/
.content-center-center {
display: flex;
align-items: center;
justify-content: center;
}/*--centers children vertically and horizontally*/
.content-center-end {
display: flex;
align-items: center;
justify-content: flex-end;
}/*--centers children vertically & aligns them to right*/
.content-center-bottom {
display: flex;
align-items: flex-end;
justify-content: center;
}/*--centers children horizontally & aligns them to bottom*/
.content-right-bottom {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}/*--aligns children to right and bottom*/
/* bonus flex capability */
.content-inherit-height {
display: flex;
}/*--child will inherit height of parent even if it is dynamic*/
/*Downloaded from https://www.codeseek.co/-Infamous/easy-verticalhorizontal-centering-and-aligning-flexbox-vWxLVE */
// not relevant to css, just grows bonus div
new Vue({
el: '#growing-section',
data: {
growSection: false
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
Vue js
v2.3.4
