13
2020
12

如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

div:


1

2

3

4


       


        border

        :

         

        1px

         

        solid 

        red

        ;

       


       


        margin

        :

         

        0

         

        auto

        ;

         

       


       


        height

        :

         

        50px

        ;

       


       


        width

        :

         

        80px

        ;

       


      

浮动元素的上下左右居中:


1

2

3

4

5

6

7

8


       


        border

        :

         

        1px

         

        solid 

        red

        ;

       


       


        float

        :

         

        left

        ;

       


       


        position

        :

         

        absolute

        ;

       


       


        width

        :

         

        200px

        ;

       


       


        height

        :

         

        100px

        ;

       


       


        left

        :

         

        50

        %

        ;

       


       


        top

        :

         

        50

        %

        ;

       


       


        margin

        :

         

        -

        50px

         

        0

         

        0

         

        -

        100px

        ;

         

       


      

绝对定位的左右居中:


1

2

3

4

5

6

7


       


        border

        :

         

        1px

         

        solid 

        black

        ;

       


       


        position

        :

         

        absolute

        ;

       


       


        width

        :

         

        200px

        ;

       


       


        height

        :

         

        100px

        ;

       


       


        margin

        :

         

        0

         

        auto

        ;

       


       


        left

        :

         

        0

        ;

       


       


        right

        :

         

        0

        ;

         

       


      

还有更加优雅的居中方式就是用flexbox,我以后会做整理。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。