CSS实现元素居中的五种方法

2024年1月8日 147次阅读 来源: 只会前端的切图仔

1.使用text-align水平居中

<style>
.center{
  text-align: center;
  background: rgba(0,0,0,.5);
}
.center img{
  width: 33%;
  height: auto;
}
</style>
<body>
  <div class="center">
        <img src="img/img.jpg" alt="img">
    </div>
</body>

这个属性适合自适应居中，但必须注意的是：居中的元素必须是行内元素。

2.使用absolute定位居中

<style>
.center{
    position: relative;
    min-height: 500px;
    background: rgba(0,0,0,.5);
}
.center img{
    width: 200px;
    height: 200px;
    overflow: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
}
</style>
<body>
<div class="center">
        <img src="img/img.jpg" alt="img">
    </div>
</body>

这种 方案 有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height

3.使用translate居中

<style>
.center{
    position: relative;
    min-height: 500px;
    background: rgba(0,0,0,.5);
}
.center img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  width:30%;
  height: auto;
}
</style>
<body>
<div class="center">
        <img src="img/img.jpg" alt="img">
    </div>
</body>

但是有以下几种缺点:
1.CSS transform 在部分就浏览器上需要使用 前缀;
2.不支持 IE9 以下的浏览器;
3.外部容器需要设置height （或者用其他方式设置），因为不能获取 绝对定位 的内容的高度
4.如果内容包含文字，现在的浏览器合成技术会使文字模糊不清

4.使用table-cell居中

<style>
.center{
    display: table;
    background: rgba(0,0,0,0.5);
    width: 200%;
    height: 200%;
    text-align: center;
}
.center-core{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>
<body>
<div class="center">
     <div class="center-core">
           居中
     </div> 
</div>
</body>

利用的知识点：
display:table 此元素会作为块级表格来显示（类似 <table>）
display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

5.使用Flexbox居中

<style>
.center{
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,.5);
}
.square{
    height: 200px;
    width: 200px;
    background: red;
}
.circle{
    width: 150px;
    height: 150px;
    background: blue;
}
</style>
<body>
<div class="center">
        <div class="square"></div>
        <div class="circle"></div>
        <div class="square"></div>
    </div>
</body>

利用的知识点：
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

    原文作者：只会前端的切图仔
    原文地址: https://www.jianshu.com/p/2a2d92072440
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞