div如何水平居中与垂直居中？css/html

2025-09-29 11:29:32

1、先看下初始化代码，此时div没有水平和垂直居中

<html>

<head>

<style>

</style>

</head>

<body>

</div>

</body>

</html>

div如何水平居中与垂直居中？css/html

2、运行结果如下

div如何水平居中与垂直居中？css/html

3、我们来实现让div水平居中

让div实现水平居中的最佳方式是设置margin为auto(自动)，或者仅仅设置margin-left与margin-right自动。

代码如下：

margin:auto;

div如何水平居中与垂直居中？css/html

4、运行结果如下

div如何水平居中与垂直居中？css/html

5、然后我们来设置让div垂直居中。

垂直居中也可以通过设置margin方式实现。不过不能设置为auto，要设置上下margin的具体的百分比或者具体的像素值。不过这个只能根据你的实际情况来设置，我这里只需要设置margin-top为5%就可以了

代码如下

margin-top:5%;

div如何水平居中与垂直居中？css/html

6、运行结果如下

div如何水平居中与垂直居中？css/html

7、还有几种垂直居中方法

1. 垂直居中也可以通过设置div的父元素的padding方式实现

我这里设置的padding-top:5%;

代码如下：

div如何水平居中与垂直居中？css/html

8、运行结果如下

div如何水平居中与垂直居中？css/html

1、1. 可以通过相对定位实现div垂直居中

2. 可以通过绝对定位实现div垂直居中

3. 可以设置div父元素的行高等于其本身高度实现垂直居中

以上思路都是清测可行的，

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。