欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

u014250382

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

分类专栏： css学习文章标签： css-盒子

本文链接：https://blog.youkuaiyun.com/u014250382/article/details/52572537

css学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了多种使用CSS实现元素在页面上水平垂直居中的方法，包括inline-block、absolute定位、flex布局等，并分析了各自的优缺点及兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.inline-block + text-align + table-cell + vertical-align

<div class="parent">
        <div class="child">Demo</div>
    </div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #1B6C8E;
  }
   .child {
    width:200px;
     display: inline-block;
     border: 1px solid red;
  }
</style>

兼容性较好

2.absolute + transform

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

由于transform属性兼容性较差
优点：绝对定位脱离文档流，不会对后续元素的布局造成影响

3.flex + justify-content + align-items 弹性盒子

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

只需设置父节点属性，无需设置子元素

4.top+left+bottom+right+margin:auto

.parent {
  position:relative;
}
.child {
  position:absolute;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  margin:auto;
}

5.line-height

.parent{
   line-height:300px;
   text-align:center;
}
.child{
  display:inline-block;
  vertical-align:middle;
}

缺点：line-height:有点偏向固定高度不属于可变的高度居中

.parent{
  display:flex;
}
.child{
  margin:auto;
}

缺点：只能根据内容的宽度居中当固定宽度时，便失去作用

7.display:box

 .parent{
  display:box;
  display: -webkit-box;
  border:1px solid red;
  width:500px;
  height:500px;
}
.child{
    margin:auto;
    border:1px solid yellow;
}

元素水平居中