Skip to content

Instantly share code, notes, and snippets.

@ghostcode
Last active March 2, 2023 06:48
Show Gist options
  • Select an option

  • Save ghostcode/16e05592da16ab088d21 to your computer and use it in GitHub Desktop.

Select an option

Save ghostcode/16e05592da16ab088d21 to your computer and use it in GitHub Desktop.
Flex实现水平垂直居中

水平垂直居中是前端的痛,也是前端__永恒__话题,这次记录一个用display:flex实现的方法:

###html###

<div class="flex">
  <p>content content</p>
</div>

###css###

.flex{
  display:flex;
  width:600px;
  height:600px;
  background-color:#333;
}

.flex p{
  margin:auto;
}

JS Bin<script src="http://static.jsbin.com/js/embed.js"></script>

@Joseph-Alice
Copy link

666

@tylerrrkd
Copy link

777

@hasbai
Copy link

hasbai commented Mar 2, 2023

888

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment