css水平垂直居中方法(全网最全)
目录
一.脱离文档流
1.有没有宽高都可以
2.必须要有宽高
二.没有脱离文档流
1.有无宽高都可
2.有宽高
一.脱离文档流
只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),
有三种方式:
有无宽高都可1.父相子绝 可以使用 margin:auto2.父相子绝 transform:translatex
有宽高3.父相子绝 margin-top 一半
1.有没有宽高都可以
下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置
方法一 margin:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:100%;height:100%; border:1px solid red;
}
.box2{width:400px;height:400px;background-color:skyblue;position: relative;
}
.box3{width:100px;/*1.width:90%也可以 2.不设置宽也可以*/height:100px;/*1.height:90%也可以 2.不设置高也可以*/background-color: gray;position: absolute;top:0;right:0;bottom: 0;left: 0;margin:auto;
}
</style>
</head>
<body>
<div class="box1"><div class="box2">div2<div class="box3">div3</div></div>
<div>
</body>
</html>
方法二 transform:translate:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:400px;height:400px;background-color: bisque;position: relative;
}
.box2{width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/background-color: aqua;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);
}
</style>
</head>
<body><div class="box1"><div class="box2"></div>
</div> </body>
</html>
2.必须要有宽高
方法一 margin-top margin-left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:400px;height:400px;background-color:bisque;position: relative;
}
.box2{width:100px;/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/height:100px;/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/background-color: aqua;position: absolute;top:50%;left: 50%;margin-top: -50px;margin-left: -50px;
}
</style>
</head>
<body><div class="box1"><div class="box2"></div></div> </body>
</html>
方法二:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{position:relative;width: 300px;height: 300px;background-color: blanchedalmond;}.box2{position: absolute;width: 100px;height: 100px;background-color: aqua;top:0;left: 0;bottom: 0;right: 0;margin:auto;}</style></head><body><div class="box1"><div class="box2"></div></div></body>
</html>
二.没有脱离文档流
有3种方法
有无宽高都可:
1.(父)display:flex;/*将其定义为弹性容器*/align-items: center;/*垂直居中对齐*/justify-content: center;/*水平居中对齐*/2.(父)display:flex(子)margin:auto有宽高
1.(父)display:table-cell;vertical-align: middle;(垂直居中)(子)margin:0 auto(水平居中)
1.有无宽高都可
方法一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:100%;height:100%; border:1px solid red;
}
.box2{width:400px;height:400px;background-color:skyblue; display:flex;/*将其定义为弹性容器*/align-items: center;/*垂直居中对齐*/justify-content: center;/*水平居中对齐*/
}
.box3{/* 宽高可以不设置width:100px;height:100px;*/ background-color: gray;
}
</style>
</head>
<body>
<div class="box1"><div class="box2"><div class="box3">div3</div></div>
<div>
</body>
</html>
方法二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:100%;height:100%; border:1px solid red;
}
.box2{width:400px;height:400px;background-color:skyblue;position: relative;display:flex;/*最新特性*/
}
.box3{/*有无宽高都可以*//*width:100px;height:100px;*/ background-color: gray; margin:auto;
}
</style>
</head>
<body>
<div class="box1"><div class="box2"><div class="box3">div3</div></div>
<div>
</body>
</html>
2.有宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">.box1{width:100%;height:100%; border:1px solid red;
}
.box2{width:400px;height:400px;background-color:skyblue;/*父块设置垂直居中*/display: table-cell;vertical-align: middle;
}
.box3{width:100px;height:100px;background-color: gray;margin:0 auto;/*子块设置水平居中*/
}
</style>
</head>
<body>
<div class="box1"><div class="box2">div2<div class="box3">div3</div></div>
<div>
</body>
</html>
css水平垂直居中方法(全网最全)相关推荐
- 16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
- HTML/CSS水平垂直居中方法(待补充)
一.已知盒子宽高 绝对定位 + 偏移值 + margin 让明确宽高的盒子水平垂直居中于窗口: ①position: absolute; 元素会变成块元素,脱离普通文档流 ②top: 0; left: ...
- css水平垂直居中方法总结
水平垂直居中 已知高度和宽度的元素 方案一:设置父元素为相对定位,给子元素设置绝对定位,top:0;right:0;left 0;bottom:0;margin:auto; 方案二: 使用水平居中,同 ...
- 清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
- css水平垂直居中各种方法实现方式
不定宽高水平垂直居中? 面试题回答方式: 通过display:flex:justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中 也可以 ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...
- css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
- css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位 注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
最新文章
- MySQL中merge表存储引擎用法
- android universal-image-loader的使用
- 的原型是什么_学习服装原型是什么?
- stylus之运算符(Operators)
- WIAC上,华为展区都有点儿啥?
- java运费模板设计_猿实战17——实现你未必知晓的运费模板
- 【spring boot】启动类启动 错误: 找不到或无法加载主类 com.codingapi.tm.TxManagerApplication 的解决方案...
- 瞧瞧,人家这后端API接口写得,那叫一个巴适~,再看看我的,像坨屎!
- 一篇文章玩转世界最强音乐Spotify API操作
- 下载新浪股票历史数据
- 计算机编辑视频用什么配置文件,AE/PR剪辑视频需要什么电脑配置?适合剪辑视频的电脑配置推荐...
- Axure RP 8的介绍
- 维语翻译_维语翻译中文转换器_维汉翻译通软件app下载安装
- 基于ESP32测温湿度上传到OneNET并通过微信小程序控制,查看,下发指令
- 编写吃c语言程序步骤,自己做的一个C语言小游戏——吃金子
- 【运动规划】MIT 基于采样和优化的区别
- springStudy
- 织梦建站好吗?织梦好学、好用吗?
- 工程量计算稿_如何从工程图或线稿中删除背景
- python:实现meme生成器(附完整源码)