元素的垂直水平居中的三种方法

原创于 2017-08-09 18:34:52 发布 · 397 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文介绍了三种使用CSS实现子元素在父元素内居中的方法：通过设置padding值、使用定位属性以及结合left/top与margin属性。这些技巧适用于不同的场景，帮助开发者灵活地调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当父元素，子元素的盒子大小已经确定了。可以通过计算来，设置padding的值来填充，使子元素居中。
如果是正常盒子，那么增加paddig会改变盒子的大小
如果是怪异盒子，那么增加padding会向里面挤，不会改变盒子的大小。

可以将子元素垂直水平居中

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

原理为：left+right+width+padding+margin=包含块的宽度，当前面四个值确定之后，margin会自动将其余的部分平分从而达到居中的效果。

//父元素的50%
    left:50%;
    top:50%;
    margin-left:自身宽度的一半 ;
    margin-top:自身高度的一半;

先设置父元素的50%,然后在将移动多的位置，移回去。