让div水平垂直居中的六种方法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ActiveQi/article/details/98987178

**

方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)

**
在这里插入图片描述

**

方法二:绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值。

**
在这里插入图片描述

**

方法三:绝对定位方法:绝对定位下top left right bottom 都设置0

**
在这里插入图片描述

**

方法四: flex布局方法:当前div的父级添加flex css样式

**
在这里插入图片描述

**

方法五:table-cell实现水平垂直居中: table-cell middle center组合使用(让div里面的文本内容)

**
在这里插入图片描述
**

方法六:绝对定位:calc() 函数动态计算实现水平垂直居中

**
在这里插入图片描述
**

div水平垂直居中方法的优点及缺点

**
链接:https://www.cnblogs.com/mslalan/p/8109901.html

展开阅读全文

没有更多推荐了,返回首页