联系我们
简单又实用的WordPress网站制作教学
当前位置：网站首页 > 程序开发学习 > 正文

[css面试题]实现一个盒子的水平竖直居中对齐效果

作者：小教学发布时间：2023-09-20分类：程序开发学习浏览：73

导读：面试题里有时还会强调子盒子宽高是否已知，要注意一下尝试一:给父盒子设置填充或者子盒子设置边距<style>.father{width:30...

面试题里有时还会强调子盒子宽高是否已知，要注意一下

尝试一:给父盒子设置填充或者子盒子设置边距

<style>
    .father{
        width: 300px;
        height: 200px;
       
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        width: 100px;
        height: 100px;
         
        margin: auto;

        background-color: #d8db7b;
    }
</style>
<body>
    <div class="father">
        <div class="son">aa</div>
    </div>
</body>

[css面试题]实现一个盒子的水平竖直居中对齐效果
失败，只能水平居中，垂直不可以！
原因
Http://t.csdn.cn/AOMJ1
Http://t.csdn.cn/cFsg6

页边距：Auto为什么不垂直居中

利润率：Auto是具有强烈计算意味的关键字，用来计算元素对应方向上应该获得的剩余空间大小。

行内元素边际：自动；不能水平居中在一行的中央位置(行内元素不独占一行)。

块级元素设置宽度后仍占据一行空间，因此边距：自动；会将这一行的剩余空间平均分配给左右外边距。

利润率：Auto能使块级元素水平居中，但是不能垂直居中，因为垂直方向上默认没有剩余的空间。

自动保证金：注:行内元素既不能水平居中也不能垂直居中，因为行内元素水平垂直方向上默认都没有剩余的空间。

解一:子绝父相+边距：自动+四周是0(子有宽高

<style>
    .father{
      
        position: relative;  /* !!!! */
        width: 300px;
        height: 200px;
       
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        position: absolute;  /* !!!! */
        width: 100px;
        height: 100px;
        
         /* !!!! */
         top:0;
         left:0;
         bottom:0;
         right:0;

        margin: auto;

        background-color: #d8db7b;
    }
</style>
<body>
    <div class="father">
        <div class="son">aa</div>
    </div>

[css面试题]实现一个盒子的水平竖直居中对齐效果
但这种情况不适用于子盒子不定宽高的情况，例如子盒子会盛满整个父盒子
[css面试题]实现一个盒子的水平竖直居中对齐效果

尝试二:子绝父相+边距-上/左：50%+变换

子盒子宽高已知

<style>
    .father{
      
        position: relative;  /* !!!! */
        width: 300px;
        height: 200px;
       
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        position: absolute;  /* !!!! */
        width: 100px;
        height: 100px;
        
         /* !!!! */
        margin-top: 50%;
        margin-left: 50%;
        transform: translate(-50%,-50%);

        background-color: #d8db7b;
    }
</style>
<body>
    <div class="father">
        <div class="son">aa</div>
    </div>
</body>

如果你以为这个方法可以通用，那你就错了，因为

margin和padding无论Left还是Right还是顶部还是底部都是相对于父元素的宽度的，若如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。
[css面试题]实现一个盒子的水平竖直居中对齐效果
Http://t.csdn.cn/Pwcy6
Http://t.csdn.cn/YSubI

所以说，尝试一，给父盒子加填充，根本不行，父盒子的填充参考Body的大小，所以就把父盒子撑大了
[css面试题]实现一个盒子的水平竖直居中对齐效果[css面试题]实现一个盒子的水平竖直居中对齐效果所以不要试填充了！

解二:子绝父相+页边距-左/上：父盒子一半+变换(子定宽高

<style>
    .father{
        position: relative; 
        width: 300px;
        height: 200px;
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        position: absolute; 
        width: 100px;
        height: 100px;
        
         /* !!!! */
        margin-top: 100px; 
        margin-left: 150px;
        transform: translate(-50%,-50%);

        background-color: #d8db7b;
    }
</style>
<body>
    <div class="father">
        <div class="son">aa</div>
    </div>
</body>

解三:子绝父相+上/左：50%+变换(子不定宽高

子盒子可以不定宽高

<style>
    .father{
      
        position: relative;  /* !!!! */
        width: 300px;
        height: 200px;
       
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        position: absolute;  /* !!!! */
        width: 100px;
        height: 100px;
        
        
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        background-color: #d8db7b;
    }
</style>

解四:子绝父相+上图/左图：50%+MAGIN-上图/左图：负子一半(子宽高已知

也就是把transform: translate(-50%,-50%); 替换成margin-top: -50px;margin-left: -25px;所以，子盒子宽高已知

<style>
    .father{
      
        position: relative;  
        width: 300px;
        height: 200px;
       
        overflow: hidden; /* 放坑爹现象，不信你删了试试 */
        background-color: #db7b7b;
    }

    .son{
        position: absolute;
        width: 50px;  /* !!!! */
        height: 100px;
        
        
        top: 50%;
        left: 50%;
        /* transform: translate(-50%,-50%); */
        margin-top: -50px;
        margin-left: -25px;

        background-color: #d8db7b;
    }
</style>

FLEX

父盒子Flex布局，并设置对齐-内容：居中；对齐-项目：居中；

<style>
    .father{
        display: flex;
        justify-content: center;  
        align-items: center;

        width: 300px;
        height: 200px;


        background-color: #db7b7b;
    }

    .son{
        background-color: #d8db7b;
    }
</style>

表格单元格

将父盒子设置显示：表格单元格；并设置文本对齐：居中；垂直对齐：居中；子盒子设置显示：行内块；

Http://t.csdn.cn/cmr2B

<style>
    .father{
        display: table-cell;
        text-align: center;
        vertical-align: middle;

        width: 300px;
        height: 200px;


        background-color: #db7b7b;
    }

    .son{
        display: inline-block;
        background-color: #d8db7b;
    }
</style>

网格

父盒子设置为网格元素显示：网格；并设置Place-Items：居中；

<style>
    .father{
        display: grid;
        place-items: center;

        width: 300px;
        height: 200px;


        background-color: #db7b7b;
    }

    .son{

        background-color: #d8db7b;
    }
</style>

总结：

1.试方法要多个栗子，不能只试正方形，这样就发现不了保证金依据父的宽度

2.子盒子不定宽高，只能设置top/left:50%，不能设置边距-左：50%，是因为top/left:50%不像边距都参照父的宽度

[css面试题]实现一个盒子的水平竖直居中对齐效果




相关推荐

程序开发学习排行
最近发表
网站分类
标签列表
琼ICP备20000547号-3