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;
}

定位为上下左右为 0，margin：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 的一半*/
}

 

补充：其实这里也可以将 marin-top 和 margin-left 负值替换成， transform：translateX(-50%)和 transform：translateY(-50%)

 

 

效果：

 

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

 

设置父元素的 display:table-cell,并且 vertical-align:middle，这样子元素可以实现垂直居中。

 

<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

将父元素设置为 display:flex，并且设置 align-items:center;justify-content:center;

 

<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;
}

 

 

效果：

 

 

 

 

 

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