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

2024-10-15 11:58:10

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水平垂直居中方法一
猜你喜欢