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.写这篇文章的目 ...
随机推荐
- [Spring cloud 一步步实现广告系统] 8. 检索系统配置&依赖
工作流程 项目依赖 <dependencies> <!-- hystrix 监控面板 --> <dependency> <groupId>org.spr ...
- PHP中RBAC权限管理
1.RBAC概念和原理 RBAC:全称叫做Role-Based Access Control,中文翻译叫做基于角色的访问控制.其主要的作用是实现项目的权限控制. ...
- CSS定位和滚动条
0805自我总结 一.绝对定位 position: absolute; /*绝对定位: 1.定位属性值:absolute 2.在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度) ...
- 前端知识体系-NodeJS相关】NodeJS基础知识全面总结
NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...
- Cobalt Strike系列教程第二章：Beacon详解
上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...
- iOS---------开发中 weak和assign的区别
weak和assign的区别-正确使用weak.assign 一.区别 1.修饰变量类型的区别weak只可以修饰对象.如果修饰基本数据类型,编译器会报错-“Property with ‘weak’ a ...
- PHP时间戳相互转换
1.获取当前时间方法date()很简单,这就是获取时间的方法,格式为:date(format,format,timestamp),format为格式.timestamp为时间戳–可填参数. 2.获取时 ...
- linux相关（一）
一.调整xshell终端显示的最大行数 1.文件 -> 属性 -> 终端,如下图 2.调整缓冲区大小的行数,确定即可,如下图: 注意:此方法只是修改了连接该主机时的显示行数,其他主机的还是 ...
- request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+reques ...
- autocad2014一直显示正在检查许可
64位CAD2014安装成功后启动时在检查许可卡住的解决方法,以下方法经本人测试,真实可行.1.下载CCcleaner.2.将CCcleaner设置成中文版,英文好的继续第三步.(设置方法:选项opt ...