CSS垂直居中的方法

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。  

目录

(1)margin:auto 法

 (2)margin 负值法

(3)table-cell（未脱离文档流的）

 (4)利用 flex

参考回答：

(1)margin:auto 法

<div class="content">
    <img src="../assets/logo.png">
div>

.content{
  width: 400px;
  height: 400px;
  position: relative;
  border: 1px solid #465468;
}
img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

 (2)margin 负值法

<div class="container">
      <div class="inner">div>
div>

.container {
  width: 500px;
  height: 400px;
  border: 2px solid #379;
  position: relative;
}
.inner {
  width: 300px;
  height: 200px;
  background-color: #746;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px; /*height 的一半*/
  margin-left: -150px; /*width 的一半*/
}

(3)table-cell（未脱离文档流的）

<div class="container">
      <img src="../assets/logo.png" alt="">
div>

div {
  width: 300px;
  height: 300px;
  border: 3px solid #555;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
img {
  vertical-align: middle;
}

效果： 

 (4)利用 flex

<div class="container">
      <div class="inner">div>
div>

.container {
  width: 300px;
  height: 200px;
  border: 3px solid #546461;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.inner {
  border: 3px solid #458761;
  padding: 20px;
}

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。