CSS居中

最新推荐文章于 2025-05-25 18:34:15 发布

原创最新推荐文章于 2025-05-25 18:34:15 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

10 篇文章

订阅专栏

水平居中

这里写图片描述

1.margin: 0 auto

这个是用于子元素上的，前提是不受float影响

这里写图片描述

2. text-align : center ;

img的display：inline-block；(这一项就可以实现，或者与text-align配合)，类似一样在不受float影响下进行
在父元素上添加效果让它进行水平居中

这里写图片描述

水平垂直居中

这里写图片描述

3.定位和需要定位的元素的margin减去宽高的一半

这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法

这里写图片描述

4. 方法3定位和margin:auto

这个方法也很实用，不用受到宽高的限制,也很好用

这里写图片描述

5. 方法3绝对定位和transfrom

其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

这里写图片描述

6. 方法4 和 display : table-cell

<style type="text/css">
        *{
          padding: 0;
          margin: 0;
        }
        .box{
          width: 300px;
          height: 300px;
          background: #e9dfc7;
          border: 1px solid red;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
        }
        img{
          width: 100px;
          height: 150px;
        }
    </style>

7. 方法5 和flexBox居中

这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>

8. 方法6 和 vertical-align:middle;

这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        宽高不定<br>
        垂直水平居中
        </div>
    </div>
</body>