如何居中一个元素(最全版)

最新推荐文章于 2025-04-15 23:51:23 发布

Vue Boy

最新推荐文章于 2025-04-15 23:51:23 发布

阅读量2.7k

点赞数

分类专栏：其他基础文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_40643543/article/details/106095486

版权

本文详述了CSS中各种元素的居中方法，包括行内元素、块级元素、多元素、浮动元素、绝对定位元素的水平和垂直居中，以及水平垂直居中的多种实现。介绍了使用text-align、margin、display、transform、flex、grid等属性和方法，并讨论了兼容性问题。

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

前言

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：

一、水平居中

1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

 .parent{
   //在父容器设置
        text-align:center;
    }

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent{
   
    text-align:center;  
  }
  .child {
   
    display: inline-block;
  }
</style>

2.块级元素的水平居中
这种情形可以有多种实现方式，下面我们详细介绍:
①将该块级元素左右外边距margin-left和margin-right设置为auto

.child{
   
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

②使用table+margin
先将子元素设置为块级表格来显示（类似），再将其设置水平居中
display:table在表现上类似block元素，但是宽度为内容宽。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
   
    display: table;
    margin: 0 auto;
  }
</style>

③使用absolute+transform
先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
   
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .parent {
   
    position:relative;
  }
</style>

不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
④使用flex+justify-content
通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
   
    display: flex;
    justify-content

最低0.47元/天解锁文章