CSS实现DIV水平垂直居中方法一

2025-07-13 20:22:07

1、新建一个HTML文件,先定义好一个DIV,然后中间包含一个子元素DIV。

CSS实现DIV水平垂直居中方法一

2、给父元素设置宽高度,子元素的宽高度与父元素保持一致

CSS实现DIV水平垂直居中方法一

3、编写父元素的样式:width: 300px; height: 300px; border: 1px solid red; padding: 100px;主要是这个padding的效果。

CSS实现DIV水平垂直居中方法一

4、子元素的样式宽高与父元素保持一致,width:300px; height: 300px;为了明显突出,给一背景颜色backgroud: pink;

CSS实现DIV水平垂直居中方法一

5、保存文件后,直接在浏览器打开HTML文件就可以看到效果。这个方法主要是用padding的值去殂翼瑟擀实现的,让子元素以相同的大小往里缩进,也是最简单的思路之一。

CSS实现DIV水平垂直居中方法一
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢