ghostcode/Flex实现水平垂直居中.md

Last active March 2, 2023 06:48

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/ghostcode/16e05592da16ab088d21.js"></script>
Save ghostcode/16e05592da16ab088d21 to your computer and use it in GitHub Desktop.

Flex实现水平垂直居中

Raw

水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录一个用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;
}

666

777

888

Select an option