Skip to content

Instantly share code, notes, and snippets.

@zenHeart

zenHeart/flex-align-center.html

Created June 9, 2018 04:13
Show Gist options
  • Save zenHeart/27e6a6bb8121e1951024e9489515d863 to your computer and use it in GitHub Desktop.
Save zenHeart/27e6a6bb8121e1951024e9489515d863 to your computer and use it in GitHub Desktop.
Download ZIP
flex 垂直水平居中
Raw
flex-align-center.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-center-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="flex-center-container">
<p contenteditable="true">test</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment