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.写这篇文章的目 ...
随机推荐
- js中scroll滚动相关
js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...
- Python Web（一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Web框架 1.socket网络编程 架构:C/S 协议:TCP/UDP 传输层 2.Web应用 架构:B/S ...
- redis5.0.4安装配置
1.下载redis wget http://download.redis.io/releases/redis-5.0.4.tar.gz 2.解压到opt目录 tar -zxvf redis-5.0.4 ...
- oracle数据库自动生成数据库表结构文档(亲测有效)
import java.awt.Color; import java.io.FileOutputStream; import java.sql.Connection; import java.sql. ...
- Makefile 文件格式；makefile伪目标
Makefile包含 目标文件.依赖文件.可运行命令三部分. 每部分的基本格式例如以下: test: prog.o code.o gcc -o test prog.o code.o 当中 ...
- 【tf.keras】tf.keras使用tensorflow中定义的optimizer
Update:2019/09/21 使用 tf.keras 时,请使用 tf.keras.optimizers 里面的优化器,不要使用 tf.train 里面的优化器,不然学习率衰减会出现问题. 使用 ...
- 科研画图：散点连接并平滑（基于Matlab和Python）
导师要求参照别人论文中的图(下图),将其论文中的图画美观些,网上关于科研画图相关的代码比较少,就自己鼓捣了下. 附上自己整合验证过的代码: 功能:将散点连接并平滑 1)Matlab 效果图: x1=[ ...
- div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算
1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...
- 8. java 面向对象
一.面向对象特征 1. 封装 方法就是一种封装 关键字private也是一种封装 封装就是讲一些逻辑细节信息隐藏起来,对于外界不可见:外界只需调用我即可: 一旦使用了private进行修饰,那么本类当 ...
- JavaScript-----6.流程控制：分支
1.流程控制 就是来控制代码按照何种顺序来执行,流程控制有三种结构:顺序结构.分支结构.循环结构 2.顺序流程控制 程序按照代码先后顺序依次执行 3.分支流程控制 JS中提供两种分支结构语句:if语句 ...