4种CSS实现div水平垂直居中的方法

最新推荐文章于 2024-08-04 21:23:42 发布

外面有点冷的时候

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量241

点赞数

分类专栏：常见面试题文章标签： css html

本文链接：https://blog.csdn.net/weixin_46548238/article/details/120205636

版权

常见面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用绝对定位：先离开左、上50%，然后再向左、上移动半个盒子的宽和长。

.father1 {
   position: relative;
}
.son1 {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -50px;
   margin-top: -50px;
   background-color: aqua;
}

margin:auto

 .father2 {
   position: relative;
 }
 .son2 {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background-color: hotpink;
 }

弹性盒子

.father3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.son3 {
  background-color: green;
}

利用display:table-cell;然后设置vertical-align:middle。

.father4 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.son4 {
  display: inline-block;
  background-color: yellow;
}

HTML结构和样式

 <style>
 	section {
        height: 300px;
        width: 300px;
        border: 1px solid pink;
      }
      div {
        width: 100px;
        height: 100px;
      }
</style>

<body>
  <section class="father1">
    <div class="son1">1</div>
  </section>
  <section class="father2">
    <div class="son2">2</div>
  </section>
  <section class="father3">
    <div class="son3">3</div>
  </section>
  <section class="father4">
    <div class="son4">4</div>
  </section>
</body>

外面有点冷的时候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4种CSS实现div水平垂直居中的方法

利用绝对定位：先离开左、上50%，然后再向左、上移动半个盒子的宽和长。.father1 { position: relative;}.son1 { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: aqua;}margin:auto .father2 { position: relative;.
复制链接

扫一扫

专栏目录