div水平垂直居中方法汇总(共六种)
文章目录
- 第一种
- 第二种
- 第三种
- 第四种
- 第五种
- 第六种
第一种
绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式1</title><style>/*使用绝对定位,不确定子div的宽高,父元素需要添加position:relative*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {background: green;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第二种
绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式2</title><style>/*使用绝对定位,确定了子div的宽高,margin值为子div宽高的一半的负值*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {width: 200px;height: 200px;background: green;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第三种
绝对定位方法:绝对定位下top left right bottom 都设置0 ,margin设置为auto
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式3</title><style>/*使用绝对定位,确定了子div的宽高,left、right、top、bottom都设置为0,margin设置为auto*/.father {background: red;position: relative;width: 500px;height: 500px;}.son {width: 200px;height: 200px;background: green;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第四种
flex布局方法:当前div的父级添加flex css样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式4</title><style>/*使用flex布局,为父div添加flex布局样式align-items和justify-content*/.father {background: red;position: relative;width: 500px;height: 500px;-webkit-display: flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;}.son {width: 200px;height: 200px;background: green;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第五种
table-cell实现水平垂直居中: table-cell middle center组合使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式5</title><style>/*table-cell、vertical-align、text-align组合使用*//*子div只能不能是块状元素,否则只能垂直居中,无法水平居中*/.father {width: 500px;height: 500px;display: table-cell;vertical-align: middle;text-align: center;background-color: red;}.son {width: 200px;height: 200px;background-color: green;display: inline-block;}</style>
</head>
<body>
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
第六种
绝对定位:calc() 函数动态计算实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平垂直居中方式6</title><style>.father {position: relative;border: 1px solid #f40;background-color: #f30;width: 80vw;height: 80vh;}.son {position: absolute;width: 30vw;height: 30vh;background-color: #ff0;left: -moz-calc((80vw - 30vw)/2);top: -moz-calc((80vh - 30vh)/2);left: -webkit-calc((80vw - 30vw)/2);top: -webkit-calc((80vh - 30vh)/2);left: calc((80vw - 30vw)/2);top: calc((80vh - 30vh)/2);}</style>
</head>
<body>
<!--绝对定位+calc()动态计算实现水平垂直居中-->
<div class="father"><div class="son">hello simon</div>
</div>
</body>
</html>
div水平垂直居中方法汇总(共六种)相关推荐
- 让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- 如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
- 清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
- 关于DIV嵌套(二):div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
- 16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
- 如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中 第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
- 块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法 块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
- DIV高度自适应方法汇总-----摘自网友
你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法. DIV高度自适应方法汇总 网站优化(seo)中, ...
- 前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录 一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
最新文章
- bootstrap 冻结表格,冻结表头
- 【转】python-word2vec模块使用详解
- [iphone-tabbar]如何自定义TabBarController
- AdapterView及其子类之一:基本原理(ListView、ListActivity类型)
- 减治法在查找算法中的应用(JAVA)--二叉查找树的查找、插入、删除
- php dfa,DFA 算法的PHP实现
- ASP.NET with C#生成验证码的过程
- 快手视频下载和转发工具
- SQL Server迁移数据库文件(ldfmdf文件)到其他盘
- 公关广告策略分析:如何结合广告的推力和公关的拉力
- 电脑重装系统后数据恢复的方法
- IE首页被篡改(手动修复)
- #C语言学习笔记#猴子偷桃问题
- python中怎样定位字符串中元素的位置_python查找字符串位置
- Qt Creator5.7添加qwt绘图插件之成功案例解析
- python金融量化书籍_超强干货 | Python金融数据量化分析教程+机器学习电子书
- rosetta stone fatal application error: #1141错误 (罗塞塔石碑1141) 解决方法
- (MATLAB代码分享,可运行)基于改进遗传算法的柔性作业车间调度优化研究
- webug4.0总结篇
- 发那科机器人请关闭电源_FANUC机器人常见错误恢复步骤,你真的都会吗?