常见css布局水平居中的6种方法

Joker • 2019年6月6日 am12:00 • 前端笔记 • 249 阅读

说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。

css布局水平居中

方法一：margin + width





css布局水平居中margin + width

*{margin:0;padding:0;}
.box{
width:100px;
margin:0 auto;
background:red;
}



Demo

这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比

方法二：table + margin




    
    css布局水平居中table + margin
    
        *{margin:0;padding:0;}
        .box{
            display: table;
            margin: 0 auto;
            background:red;
        }
    


    Demo

说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式（支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为

方法三：inline-block + text-align




    
    css布局水平居中inline-block + text-align
    
        *{margin:0;padding:0;}
        .content{
            text-align:center;
        }
        .box{
            display:inline-block;
            background: red;
        }
    



     Demo

说明：兼容性佳（甚至可以兼容 IE 6 和 IE 7）

方法四：absolute + margin-left




    
    css布局水平居中absolute + margin-left
    
        *{margin:0;padding:0;}
        .content{
            position: relative;
        }
        .box{
            position: absolute;
            left: 50%;
            width: 100px;
            margin-left: -50px;
            background: red;
        }
    



     Demo

说明：宽度固定相比于使用transform ，有兼容性更好

方法五：absolute + transform




    
    css布局水平居中absolute + transform
    
        *{margin:0;padding:0;}
        .content{
            position: relative;
        }
        .box{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background: red;
        }
    



     Demo

说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题

方法六：flex + justify-content




    
    css布局水平居中flex + justify-content
    
        *{margin:0;padding:0;}
        .content{
            display: flex;
            justify-content: center;
        }
        .box{
            width: 100px;
            background: red;
        }
    



    Demo

说明：只需设置父节点属性，无需设置子元素flex有兼容性问题

https://hooper.eu.org/divcss/173.html

版权声明：
作者：Joker 链接：https://456787.xyz/archives/1885
文章版权归作者所有，转载请注明出处。

THE END

二维码

打赏