Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}

第二种:

###html###

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

###css###

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

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

@Joseph-Alice

This comment has been minimized.

Copy link

Joseph-Alice commented Feb 28, 2018

666

@tylerrrkd

This comment has been minimized.

Copy link

tylerrrkd commented May 24, 2018

777

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.