2019-03-01

Version:1.0StartHTML:000000224EndHTML:000170065StartFragment:000099677EndFragment:000169992StartSelection:000099681EndSelection:000169980SourceURL:https://blog.csdn.net/sinat_17775997/article/details/77547481

.第一种

利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30

div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30

按 Ctrl+C 复制代码

<!DOCTYPE html>

demo

.div1{width:100px;height:100px;border:1pxsolid#000000;}

.div2{width:40px;height:40px;background-color: green;}

.div22{

margin-left:30px;margin-top:30px;

            }

第一种

第2种

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

<!DOCTYPE html>

demo

.div1{width:100px;height:100px;border:1pxsolid#000000;}

.div2{width:40px;height:40px;background-color: green;}

.div11{

position: relative;

            }

.div22{

position: absolute;top:50%;left:50%;margin-top: -20px;margin-left: -20px;

            }

第二种

第三种

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

<!DOCTYPE html>

demo

.div1{width:100px;height:100px;border:1pxsolid#000000;}

.div2{width:40px;height:40px;background-color: green;}

.div11{

position: relative;

            }

.div22{

position: absolute;margin:auto;top:0;left:0;right:0;bottom:0;

            }

第三种

第四种

利用css3的新增属性table-cell, vertical-align:middle;

<!DOCTYPE html>

demo

.div1{width:100px;height:100px;border:1pxsolid#000000;}

.div2{width:40px;height:40px;background-color: green;}

.div11{

display: table-cell;vertical-align: middle;

            }

.div22{

margin: auto;

            }

第四种

第五种方法

<!DOCTYPE html>

demo

.div1{width:100px;height:100px;border:1pxsolid#000000;}

.div2{width:40px;background-color: green;}

.div11{

display: table-cell;vertical-align: middle;

            }

.div22{

margin: auto;

            }

              div居中方法

第五种方法

第六种方法

利用flexbox布局

直接在父元素上使用flexbox的布局

<!DOCTYPE html>

demo

.div1{

width:100px;

height:100px;

border:1pxsolid#000000;

        }

.div2{

height:40px;

width:40px;

background-color: green;

        }

.div11{

display: flex;

/*!*flex-direction: column;*!可写可不写*/

justify-content: center;

align-items: center;

        }

第六种方法

第七种方法

利用transform的属性,注意子绝父相定位

缺点:需要支持Html5

<!DOCTYPE html>

demo

body{

margin:100pxauto;

position: relative;

        }

.div1{

width:100px;

height:100px;

border:1pxsolid#000000;

background-color: red;

        }

.div2{

height:40px;

width:40px;

background-color: green;

        }

.center{

position: absolute;

top:50%;

left:50%;

-ms-transform:translate(-50%, -50%);

-moz-transform:translate(-50%, -50%);

-o-transform:translate(-50%, -50%);

transform:translate(-50%, -50%);

        }

    我是外部盒子

        我要居中

第七种

第八种

两者都要固定定位,不常用

缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

<html>

demo

.div1{

width:100px;

height:100px;

border:1pxsolid#000000;

background-color: red;

position: relative;

        }

.div2{

height:40px;

width:40px;

background-color: green;

margin:30px30px;

        }

.center{

position: fixed;

left:50%;

        }


        我要居中

第八种方法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,700评论 0 8
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,564评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,900评论 0 1
  • 插入一幅saber,算是我的初期作品之一哦,技法还不成熟多多包涵
    KellyGor阅读 256评论 2 4