css 元素水平居中

最新推荐文章于 2025-08-21 16:44:59 发布

晟沚

最新推荐文章于 2025-08-21 16:44:59 发布

阅读量305

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css 水平居中定宽不定宽块级

本文链接：https://blog.youkuaiyun.com/zhuzhupozhuzhuxia/article/details/76512579

css3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了几种使用CSS实现块级元素水平居中的方法，包括定宽元素居中、使用table标签辅助居中以及通过display属性调整实现居中等。

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

定宽行内元素居中：text-align:center

定宽块级元素居中：auto

     .center{
        border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
        width:500px;/*定宽*/
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
      }
    <div class="center">
        块级元素水平居中
    </div>

不定宽块级元素水平居中

1）加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。
第二步：为这个 table 设置“左右 margin:auto”（这个和定宽块状元素的方法一样）。

      table{
        margin:0 auto;
      }
      table ul{list-style:none;margin:0;padding:0;}
      table li{float:left;display:inline;margin-right:8px;}
    <div>
      <table>
        <tbody>
          <tr><td>
            <ul>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
            </ul>
          </td></tr>
        </tbody>
      </table>
    </div>

2）设置 display;inline 方法

改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果.


       .container1{
         text-align:center;
       }
       .container1 ul{
         list-style:none;
         margin:0;
         padding:0;
         display:inline;
       }
       .container1 li{
         margin-right:8px;
         display:inline;
       }
    <div class="container1">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>

3）设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，
子元素设置 position:relative 和 left:-50% 来实现水平居中。


        .container{
          float:left;
          position:relative;
          left:50%
        }
        .container ul{
          list-style:none;
          margin:0;
          padding:0;
          position:relative;
          left:-50%;
        }
        .container li{float:left;display:inline;margin-right:8px;}
  <div class="container">
   <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
   </ul>
 </div>