div水平垂直居中的四种方式
让div水平居中的方式,我所知道的就是以下这四种。
文章目录
- 一、margin
- 二、绝对定位
- 三、子元素绝对定位父元素相对定位
- 四、flex布局
- 总结
一、margin
第一种方式我们可以利用外边距属性来使div水平垂直居中
先来看一段有问题的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin</title><style>*{margin: 0;padding: 0; }/* 父容器样式 */.container{height: 800px;background-color: black;}/* 子容器样式 */.son{width: 300px;height: 300px;background-color: white;/* 水平垂直居中 */margin: 250px auto;}</style>
</head>
<body><!-- 父容器 --><div class="container"><!-- 子容器 --><div class="son"></div></div>
</body>
</html>
效果
可以看到,给子容器设置顶部外边距,连带父容器也被往下挤了,这是因为margin属性只有遇到边界才会"停下来"。边界就是border属性或者padding属性,因为父容器没有边界,所以子容器的外边距是相对父容器的父容器的,也就是body。所以我们想要让子容器相对父元素垂直居中,就要给父元素设置一个padding或者border。
正确的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin</title><style>*{margin: 0;padding: 0; }/* 父容器样式 */.container{height: 800px;background-color: black;border: 1px solid;/* padding: 1px; */}/* 子容器样式 */.son{width: 300px;height: 300px;background-color: blue;/* 水平垂直居中 */margin: 250px auto;}</style>
</head>
<body><!-- 父容器 --><div class="container"><!-- 子容器 --><div class="son"></div></div>
</body>
</html>
margin:上下边距 左右边距;
要让div水平居中,就要设置左右边距为auto,自适应。
要让div垂直居中,就要计算上下边距了,垂直居中的上下边距为父容器高度的一半减去子容器高度的一半。
二、绝对定位
正确代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style>*{margin: 0;padding: 0;}/* 父容器 */.container{height: 700px;position: relative;background-color: black;}/* 子容器 */.son{width: 300px;height: 300px;background-color: white;position:absolute;/* 水平垂直居中 */left: 0;right: 0;top: 0;bottom: 0;margin: auto;}</style>
</head>
<body><div class="container"><div class="son"></div></div>
</body>
</html>
只要让子容器开启绝对定位,并且left、right、top、bottom全为0,margin:auto就能实现div水平垂直居中了。
三、子元素绝对定位父元素相对定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子绝父相</title><style>*{margin: 0;padding: 0;}/* 父容器 */.container{height: 700px;background-color: black;/* 父容器开启相对定位*/position: relative;}/* 子容器 */.son{width: 300px;height: 300px;background-color: white;/* 子容器开启绝对定位*/position:absolute;/* 水平垂直居中 */top: 50%;margin-top: -150px;left: 50%;margin-left: -150px;}</style>
</head>
<body><div class="container"><div class="son"></div></div>
</body>
</html>
给父容器开启相对定位,子元素开启绝对定位。
水平居中 left: 50%;margin-left: -150px;
垂直居中 top: 50%;margin-top: -150px;
margin的值是子容器宽度或高度一半的负值
水平方向我们一般使用left,垂直方向一般使用top,以免出现问题。
四、flex布局
正确代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局</title><style>*{margin: 0;padding: 0;}/* 父容器 */.container{height: 700px;background-color: black;/* 父容器开启flex布局 */display: flex;/* 水平垂直居中 */justify-content: center;align-items: center;}/* 子容器 */.son{width: 300px;height: 300px;background-color: white;}</style>
</head>
<body><div class="container"><div class="son"></div></div>
</body>
</html>
给父容器开启flex布局,父容器就变成flex容器了,子容器就变成flex项目了。
利用flex布局控制项目水平方向和垂直方向排列的属性使div垂直水平居中。
justify-content: center;水平居中
align-items: center;垂直居中
总结
可能讲述得不清楚,能看懂就好了。
div水平垂直居中的四种方式相关推荐
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动 水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
- div清除浮动的四种方式
div 清除浮动的四种方式 清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
- div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中 这里要有两层或者给body设置高度100vh,然后给元素设置 ...
- 水平垂直居中的几种方式
文章目录 水平垂直居中 一.实现水平垂直居中的方式 二.具体实现 元素定宽高 利用定位 + calc 利用定位 + margin:负值 元素不定宽高 利用定位 + margin:auto 利用定位 + ...
- 让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高 使用定位+margin element.style {position: absolute; ...
- CSS实现水平垂直居中的几种方式
1.最简单 margin: 0 auto line-height等于height .outer {width: 200px;padding: 200px;background-color: pink; ...
最新文章
- mysql delete 注意
- SharePoint:如何设置某个页面必须由站点集管理员打开
- mysql int 最大显示宽度_mysql int 整数类型 解释显示宽度 和 存储宽度
- ZTree的全选 反选 全不选 取消 清空
- PyCharm点击设置没反应,无法进行设置
- linux查看编译器的大小端,Linux系统大小端判断
- golang 项目设置后台运行
- python列表求和显示unsupport_本地使用pip命令安装requests库,提示unknow or unsupported command install解决方法...
- Iperf 源代码分析(四)
- 宁浩网sql注入工具_国产SQL注入漏洞测试工具 - 超级SQL注入工具(SSQLInjection)...
- Linux查询系统上次启动时间last reboot、上线时间uptime
- cleaned_data debug django
- 计算机常用英语词汇及读音,程序员相关常见英文单词的正确读法
- 【图解版】B2C电商平台解决方案
- Windows防火墙无法更改某些设置
- 关于内存类型 UDIMM、RDIMM、LRDIMM 的学习结论(转)
- 免费直播 | Three.js 实现粒子雷雨特效,走入前端 3D 世界!
- 二维数组的定义和访问
- MySQL笔记(狂神说)
- 一文读懂:本地数据湖丨数据仓库丨云数据湖的利与弊
热门文章
- 大型医院his系统源码 医院信息管理系统源码 C/S架构
- 凸透镜成像实验软件_初中物理凸透镜成像原理虚拟实验平台的设计与开发
- arduino android模拟器,模拟仿真Arduino软件(Virtual Breadboard)
- 支付宝COM组件浅析
- iPhone屏幕尺寸、分辨率及适配
- iPhone屏幕分辨率开发尺寸
- canon iPF 系列保养墨盒清零方法
- CENTOS7安装搜狗输入法和PYCHARM光标跟随记录
- 基于PHP的汽车租赁网站,基于SSM汽车租赁管理系统
- 手游无限多开器安卓版_万能多开助手app下载-万能多开助手 安卓版v3.8.2-PC6安卓网...