<!DOCTYPE html>
<html>
<head>
<title>Centralizando DIV</title>
<style>
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
width: 100vw;
}
.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
background: hsla(0,0%,0%,.1);
padding: 1em;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
</html>
Created
May 27, 2016 11:36
-
-
Save davidalves1/71945f156d250dbd084bc31f76b9231e to your computer and use it in GitHub Desktop.
Códigos para centralizar div no layout responsivo uitlizando flex-box
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment