Skip to content

Instantly share code, notes, and snippets.

@lillyfreitas

lillyfreitas/centralizar-vertical-horizontal.css

Last active May 19, 2018 00:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lillyfreitas/c4f98997c663e1b8b598e600d23082b8 to your computer and use it in GitHub Desktop.
Save lillyfreitas/c4f98997c663e1b8b598e600d23082b8 to your computer and use it in GitHub Desktop.
Download ZIP
Centralizar div vertical e horizontalmente
Raw
centralizar-vertical-horizontal.css
/* Centralizar vertical e horizontal. Fonte: https://www.w3.org/Style/Examples/007/center.en.html#viewport3 */
div.aviso {
background:#006600;
color:#FFFFFF;
border-radius:10px;
padding:10px;
position:absolute;
top:50%;
left:50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
Raw
centralizar-vertical-horizontal.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Centralizar vertical e horizontal</title>
<link rel="stylesheet" href="centralizar-vertical-horizontal.css">
</head>
<body>
<div class="aviso">
<h1>Texto centralizado!</h1>
<p>Fonte: <a href="https://www.w3.org/Style/Examples/007/center.en.html#viewport3">https://www.w3.org/Style/Examples/007/center.en.html#viewport3</a></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment