CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）
首先，我们来看下垂直居中：
（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
background: green;
height:200px;
}
a {height:%;
line-height: 200px;
color:red;
}
</style>
</head>
<body>
<div class="box">
<a href="">ggg </a>
</div>
</body>
</html>
（2）、如果元素是行内块级元素，一般会使用diaplay:inline-block,vertical-align:middle，还有一个伪元素让元素内容处于容器中央！给父元素添加伪元素！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background: green;
height:200px;
}
.box::after, .box2{
display:inline-block;
vertical-align: middle;
}
.box::after{
content:'';
height:%;
}
.box2{background-color:red;width:20px;height:20px;}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
（3）、通过display：flex来实现垂直居中；
父级：display：flex；
子元素：align-self：center；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background: green;
height:300px;
width: 600px;
display:flex; }
.box2{background:red;
width:%;
height:%;
align-self: center; } </style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
（4）、使用display：table进行垂直居中！
给父元素设置display：table；子元素设置为display：table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
display:table;
} .box .box2{
color:red; display:table-cell;
vertical-align: middle; } </style>
</head>
<body>
<div class="box">
<div class="box2">ddddd</div>
</div>
</body>
</html>
（5），已经知道父元素的高度，给子元素相对定位，在通过translaY（）得到垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px; } .box .box2{
background-color:red;
width:%;
height:%;
position: relative;
top:%;
transform:translateY(-%);
} </style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
6)、父元素高度不知道，同过transform实现，先给父元素相对定位，在给子元素绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
position: relative;
} .box .box2{
background-color:red;
width:%;
height:%;
position: absolute;
top:%;
transform:translateY(-%);
} </style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
二、水平居中：
（1）、行内元素方案，只要把行内元素包裹 在一个盒子中，并且在他父级元素添加如下属性：text-align：center；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
text-align:center;
}
P{color:red;}
</style>
</head>
<body>
<div class="box">
<p>1111</p>
</div>
</body>
</html>
（2）、单个块状元素解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
text-align:center;
}
.box2{
background-color: red;
width: 20px;
height: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
3）、多个块状元素解决方案：父元素设置为text-align：center；子元素设置为：display：inline-block;
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
text-align:center;
}
.box2, .box3{
background-color: red;
width: 20px;
height: 20px;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
也可以使用flexbox来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
display:flex;
justify-content:center;
}
.box2, .box3, .box4{
background-color: red;
width: 20px;
height: 20px; }
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
（4）、不定宽度块元素水平居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
float:left;
position: relative;
left:%;
}
.box ul{
position:relative;
left:-%;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
三：实现水平+垂直居中，也就是在中央：（1）单行行内元素：父元素设置：text-align:center，display：table-cell;vertical-align:middle,在这里，图片，文字，都是一样的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: #ccc;
width:500px;
height: 500px;
display:table-cell;
text-align: center;
vertical-align: middle;
}
img{width:50px;
height: 50px;} </style>
</head>
<body>
<div class="box">
<img src="5.jpg" alt="">
</div>
</body>
</html>
文字在中央，还可以父级设置为text-align:center;line-height设置为父元素的height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: #ccc;
width:500px;
height: 500px;
text-align: center;
} p{line-height: 500px;}
</style>
</head>
<body>
<div class="box">
<p></p> </div>
</body>
（2）对于单个块级元素，父元素设置为相对定位，子元素设置为绝对定位高度，宽度为50%
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: #ccc;
width:500px;
height: 500px;
position: relative;
}
.box2{position: absolute;
top:%;
left:%;
background-color: black;
width: 20px;
height: 20px;} </style>
</head>
<body>
<div class="box">
<div class="box2"></div> </div>
</body>
</html>
（3）、flex实现不定宽度水平+垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
background-color: green;
height:300px;
width: 600px;
display:flex;
justify-content:center;
align-items:center;
}
.box2, .box3, .box4{
background-color: red;
width: 20px;
height: 20px; }
</style>
</head>
<body>
<div class="box">
<div class="box2"></div> </div>
</body>
</html>
推荐阅读：CSS边框长度控制
原文链接：https://blog.csdn.net/qq_35788269/article/details/80691114
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ background: green; height:200px; } a {height:100%; line-height: 200px; color:red;} </style></head><body> <div class="box"> <a href="">ggg </a> </div></body></html>————————————————版权声明：本文为CSDN博主「左手写爱等等」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_35788269/article/details/80691114
CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）的更多相关文章
- CSS - div居中在屏幕中(水平居中 + 垂直居中)
方法一代码 <div> <h1>404 Not Found.</h1> </div> <style> div { text-align: c ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- CSS position &居中（水平，垂直）
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
- （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- CSS布局：元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css知识笔记：水平垂直居中（别只看，请实操！！！）
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
随机推荐
- Python爬虫实战教程：爬取网易新闻
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Amauri PS:如有需要Python学习资料的小伙伴可以加点击 ...
- docker redis实现主从复制
1.使用docker启动三个redis实例,容器名称分别为:myredis-master-6379,myredis-slave-6380,myredis-slave-6381.通过命令可以看到容器给三 ...
- Android 进程间通讯方式
Android 进程间通讯方式 1.通过单向数据管道传递数据 管道(使用PipedWriter/ 创建PipedReader)是java.io包的一部分.也就是说,它们是一般的Java功能,而不是An ...
- ORACLE EXPIRED(GRACE)
查询用户状态col username for a20col account_status for a20select username,account_status,LOCK_DATE,EXPIRY_ ...
- Linux-3.14.12内存管理笔记【构建内存管理框架（4）】
虽说前文分析内存管理框架构建的实现,提到了find_zone_movable_pfns_for_nodes(),但这里不准备复述什么,仅针对required_movablecore和required_ ...
- APK更新集成实践
任务目标:将内网APK打包后最新下载链接.更新时间.更改日志显示在一个我自己制作的APP里 任务作用:我们在内网测试时更新下载APK更加便捷,并且能够清楚目标APK的版本情况,回归.验证做到有的放矢 ...
- <DFS & BFS> 286 339 (BFS)364
286. Walls and Gates DFS: 思路是,搜索0的位置,每找到一个0,以其周围四个相邻点为起点,开始 DFS 遍历,并带入深度值1,如果遇到的值大于当前深度值,将位置值赋为当前深度值 ...
- MySQL select from where multiple conditions
Maybe one of the most used MySQL commands is SELECT, that is the way to stract the information from ...
- 使用adb安装apk到手机
[ADB]Android debug bridge.Android手机实际是基于Linux系统的.通过USB线将android手机与电脑连起来,在电脑上dos命令行中敲adb shell命令,可以登录 ...
- golang数据结构之选择排序
//SelectSort 选择排序 func SelectSort(arr *[]int) { ; i < len(arr); i++ { tmp := arr[i] index := i ; ...