当前位置:Web前端 > > 正文

css怎么让div整体居中(CSS实现DIV居中的三种方法)

时间:2022-03-28 01:09:23类别:Web前端

css怎么让div整体居中

CSS实现DIV居中的三种方法

下面给大家分享li居中的实现代码,具体代码如下所示:

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; height: 40px; background-color: green;}
            </style>
            <li class="li1">
                <li class="li2">
                </li>
            </li>
    
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    如上的两个li,实现li2在li1里面是居中显示

    一、方法一

      利用margin,li1的宽减去li2的宽就是li2margin-left的数值:(100-40)/2=30

      li1的高减去li2的高就是li2margin-top的数值:(100-40)/2=30

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; height: 40px; background-color: green;}
    
                .li22{
                    margin-left: 30px;margin-top: 30px;
                }
            </style>
            <li class="li1">
                <li class="li2 li22">
                </li>
            </li>
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    二、方法二

      利用css的 position属性,把li2相对于li1的top、left都设置为50%,然后再用margin-top设置为li2的高度的负一半拉回来,用marg-left设置为宽度的负一半拉回来,css如下设置

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; height: 40px; background-color: green;}
                .li11{
                    position: relative;
                }
                .li22{
                    position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
                }
            </style>
            <li class="li1 li11">
                <li class="li2 li22">
                </li>
            </li>
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    三、方法三

      还是用css的position属性,如下的html

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; height: 40px; background-color: green;}
                .li11{
                    position: relative;
                }
                .li22{
                    position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
                }
            </style>
            <li class="li1 li11">
                <li class="li2 li22">
                </li>
            </li>
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    四、方法四

      利用css3的新增属性table-cell

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; height: 40px; background-color: green;}
                .li11{
                    display: table-cell;vertical-align: middle;
                }
                .li22{
                    margin: auto;
                }
            </style>
            <li class="li1 li11">
                <li class="li2 li22">
                </li>
            </li>
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    这个方法还有一个好处就是,li2的高度可以不固定,如下
     

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>demo</title>
        </head>
        <body>
            <style type="text/css">
                .li1{  width: 100px; height: 100px; border: 1px solid #000000;} 
                .li2{ width:40px ; background-color: green;}
                .li11{
                    display: table-cell;vertical-align: middle;
                }
                .li22{
                    margin: auto;
                }
            </style>
            <li class="li1 li11">
                <li class="li2 li22">
                   li居中方法
                </li>
            </li>
        </body>
    </html>
    
  • css怎么让div整体居中(CSS实现DIV居中的三种方法)

    总结

    以上所述是小编给大家介绍的CSS实现li居中的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐