css居中的一些方法

标签：sla   device   char   auto   otto   image   set   transform   text   

水平居中

1.行内元素水平居中，外面的父级块元素设置样式text-align:center;

            
                我是行内元素
            
        
    

效果图如下：

2.块级元素的水平居中
方法一：设置左右两边的margin为auto即可

    





            

                我是内部的块级元素
            
        
    

效果图如下：

方法二:css3新属性fit-content意思是宽度缩小到和内容一样宽配合margin:auto;

    





            

                我是内部的元素
            
        
    

效果图如下：

方法三：弹性盒子布局flex

    





            

                我是内部的元素
            
        
    

效果图如下：

方法四：绝对定位 可以用left50% margin-left负自身的一般和transform和margin三种

    





            

                我是内部的元素
            
        
    

效果图如下：

垂直居中

1.行内元素

    





            
                我是内部的元素
            
        
    

效果图如下：

2.块级元素 table布局
table布局优缺点：
元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断
IE6~7, 甚至IE8 beta中无效

    





            

                我是内部的元素
            
        
    

效果如下:

方法二：flex布局
flex布局优缺点：
内容块的宽高任意, 优雅的溢出，可用于更复杂高级的布局技术中
IE8/IE9不支持，需要浏览器厂商前缀，渲染上可能会有一些问题

    





            

                我是内部的元素
            
        
    

效果如下：

方法三：同上的绝对定位的三种方法
transform优缺点：
代码少，简洁
E8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象
margin优缺点：
简单
没有足够空间时, 子元素会被截断, 但不会有滚动条

css居中的一些方法

标签：sla   device   char   auto   otto   image   set   transform   text   

原文地址：https://www.cnblogs.com/my466879168/p/12095781.html