CSS 居中方法

叁歲伎倆 2022-05-10 03:16 248阅读 0赞

水平方向上

针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素
    .text_div{
    	text-align:center;
    }
    复制代码

不定宽块状元素居中
    .text_div{
        margin:0 auto;//且需要设置父级宽度
    }
    
    复制代码

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
    .wrap{
        float:left;
        position:relative;
        left:50%;
        clear:both;
    }
    .wrap-center{
        left:-50%;
    }
    复制代码

垂直居中

单行内联(inline-)元素垂直居中 
    通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
    
    .text_div{
        height: 120px;
        line-height: 120px;
    }
    复制代码

利用表布局
    .father {
        display: table;
    }
    .children {
        display: table-cell;
        vertical-align: middle;
         text-align: center; 
    }
    复制代码

flex布局
    .center-flex {
        display: flex;
        flex-direction: column;//上下排列
        justify-content: center;
    }
    复制代码

绝对布局方式
    已知高度
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; 
    }
    未知高度
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    复制代码

垂直水平居中根据上方结合

flex方式
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    grid方式
    .parent {
      height: 140px;
      display: grid;
    }
    .child { 
      margin: auto;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS盒子模型居中方法

方法一：利用margin； <!DOCTYPE html> <html> <head> <meta chars

谁借莪１个温暖的怀抱￠/ 2023年01月03日 14:12/ 0 赞/ 178 阅读

相关 CSS盒模型居中方法

实现盒模型水平居中的方法全局样式 .parent { color: FFFFFF; height: 200px; width:

Love The Way You Lie/ 2023年01月03日 04:59/ 0 赞/ 181 阅读

相关 css各种居中方法总结

css各种居中方法总结故心故心故心故心小故冲啊 -------------------- 文章目录 css各种居中方法总结前言 1，水平居

- 日理万妓/ 2022年12月25日 01:49/ 0 赞/ 202 阅读

相关 CSS样式——div居中方法

1、绝对居中给div设置样式，div默认显示位置为body的左上方。 width: 400px; height: 300px;

比眉伴天荒/ 2022年12月17日 01:26/ 0 赞/ 217 阅读

相关 [CSS]元素水平垂直居中方法

1）父元素设置display:flex; justify-content:center; align-items:center; 2）元素position:absolute

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 01:58/ 0 赞/ 231 阅读

相关（css）盒子水平、垂直居中方法

利用定位和margin： 1、给要居中盒子的父盒子设置相对定位 2、给要居中的盒子设置固定定位 3、水平left、垂直top都设置为50% 4、利用margin，m

桃扇骨/ 2022年10月31日 13:35/ 0 赞/ 296 阅读

相关如何实现CSS居中？–CSS居中常用方法

来源：[http://www.ido321.com/824.html][http_www.ido321.com_824.html] 一、水平居中 1、内联

分手后的思念是犯贱/ 2022年08月12日 16:06/ 0 赞/ 289 阅读

相关 CSS居中常用方法

只有普通流和绝对定位的元素可以设置居中，浮动元素是不存在居中的。 1.块级元素居中 1) 普通流元素（position : static 或 position

港控/mmm°/ 2022年05月30日 08:18/ 0 赞/ 230 阅读

相关 CSS 居中方法

水平方向上针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等

叁歲伎倆/ 2022年05月10日 03:16/ 0 赞/ 249 阅读

相关 css居中方法详解

水平居中：通过设置父元素，让子元素内容居中：text-align:center; 通过设置子元素本身，让子元素居中：margin:0 auto; 以上方法生效的前

红太狼/ 2021年09月10日 17:52/ 0 赞/ 391 阅读