CSS布局：元素水平垂直居中
CSS布局：元素水平垂直居中
本文将依次介绍在不同条件下实现水平垂直居中的多种方法
水平垂直居中是在写网页时经常会用到的需求，在上两篇博客中，分别介绍了水平居中和垂直居中的方法。本文的水平垂直居中就是将之前的水平居中和垂直居中用到的方法综合起来。用到的原理都是一样的。相信掌握水平居中和垂直居中的方法后，就能自己总结如何实现水平垂直居中
Tip：下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。
一、使用text-algin和line-height
1.原理
使用text-algin属性的center值，实现水平居中。
使用line-height属性，使其的值等于父元素的高度，实现垂直居中
两者综合实现水平垂直居中
2.适用场景
（1）通常用于可以设置行高的元素上
3.实现步骤
（1）在父元素上设置文本水平居中
text-algin:center;
（2）在子元素上设置行高等于父元素高度
line-height:100px;
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid #222222;
text-align: center;/*设置水平居中*/
}
p{
line-height: 100px;/*设置行高等于父元素高度实现垂直居中*/
margin: 0;/*清除外边距的影响*/
}
</style>
</head>
<body>
<div class="box">
<p>水平垂直居中</p>
</div>
</body>
</html>
二、使用table布局
1.原理
将元素转为table类型。利用vertical-align属性进行垂直居中，子元素再使用margin进行水平居中最终实现水平垂直居中（vertical-algin居中需要有参考物，否则不能实现居中。在表单元格中可以直接设置）
2.适用场景
（1）有宽度的子元素
3.实现步骤
（1）父元素将类型转换为table-cell
display:table-cell;
（2）父元素设置vertical-align实现垂直居中
vertical-align:middle;
（3）子元素设置margin属性
margin:0 auto;
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 100px;
border: 1px solid #333;
display: table-cell;
vertical-align: middle;
}
.box .child {
width: 50px;
height: 50px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
三、使用定位
方法一：使用fixed+margin
1.原理
通过设置上下左右的定位属性，然后设置margin上下左右都为auto实现居中
2.适用场景
（1）未知大小元素在浏览器中居中
3.实现步骤
（1）子元素设置固定定位（没有变化）
position: fixed;
（2）子元素设置上下左右的定位值为0（没有变化）
left: 0;
right: 0;
top: 0;
bottom: 0;
（3）子元素设置margin
margin:auto;
4.完整代码
示例1：未知大小的元素在浏览器可视窗口中水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知大小的元素在浏览器可视窗口中水平垂直居中</title>
<style>
img{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/img13.jpg" alt="">
</div>
</body>
</html>
示例2：已知大小的元素在浏览器可视窗口中水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小的元素在浏览器可视窗口中水平垂直居中</title>
<style>
.box {
width: 100px;
height: 200px;
background: #f00;
position:fixed;
left: 50%;
top: 50%;
margin: -100px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
方法二：使用relative + absolute
1.原理
通过父元素设置相对定位，子元素设置绝对定位。利用top值和left值进行居中移动，再使用margin或transform调整位置
Tip：注意元素定位是以元素的某个边或者某个角作为参考，而不是以元素的中心点为参考
例：单个使用，是以边框为参考，两个组合使用是以角为参考点
（1）top：以元素上边框为参考，top：50px；就是元素上边框距离父元素上边框50px
（2）right：以元素右边框为参考，right：50px；就是元素右边框距离父元素右边框50px
（3）left和top组合使用：以元素的左上角的点为参考，top：50px；left：50px；表示元素左上角的点距离父元素上边框50px，距离父元素左边框50px；
（4）right和bottom组合使用：以元素的右下角的点为参考，bottom：50px；right：50px；表示元素右下角的点距离父元素下边框50px，距离父元素右边框50px；
（5）其他各种组合同理，两个对立方向的属性不能同时组合使用。例如top和bottom同时使用以top为准，bottom会失效。left和right；同时使用的话会以left为准，right会失效。
（6）所以top和left定位50%，是子元素边框或某个角移动到50%的位置，还需要移动回来子元素自身一半的长度，达到真正的居中
2.适用场景
（1）已知大小元素在父元素中居中（margin属性）
（2）未知大小元素在父元素中居中（transform属性，有兼容问题）
（3）浮动元素居中
3.实现步骤
（1）先将父元素设置为相对定位relative（无变化）
position: relative;
（2）将子元素设置为绝对定位absolute（子绝父相）（无变化）
position:absolute;
（3）向右移动子元素，向下移动子元素，移动距离为父容器的一半（50%）
top:50%;
left: 50%;
tip：此时元素的左上角在父元素的中心点
（4）通过向左和向上移动子元素的长度的一半使子元素整体水平居中。
/*margin实现*/
margin: -25px 0 0 -25px;
/*transform实现*/
transform: translate(-50%, -50%);
4.完整代码
示例1：已知大小元素在父元素中水平垂直居中（margin属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>已知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
width: 50px;
height: 50px;
background: #222222;
position: absolute;
top:50%;
left: 50%;
margin: -25px 0 0 -25px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
示例2：未知大小元素在父元素中水平垂直居中（transform属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid #333333;
position: relative;
}
.box .child {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">我是transform居中</div>
</div>
</body>
</html>
四、弹性盒子flex布局
方法一：justify-content+align-items
1.原理
css3中的弹性盒子是布局神器，并且可达到某些自适应变化的效果。利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（默认左右横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（默认上下纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。
2.适用场景
（1）已知元素大小居中
（2）未知元素大小居中
（3）多个元素同时居中
3.实现步骤
（1）父元素开启弹性盒子
display:flex;
（2）父元素设置主轴居中（对子元素生效）
justify-content: center;
（3）父元素设置侧轴居中（对子元素生效）
align-items: center;
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex居中</div>
</div>
</body>
</html>
方法二：flex/grid 与 margin:auto (最简单写法)
1.原理
父元素开启弹性盒子布局或者网格布局，之后子元素利用margin的自动值，实现居中（不能兼容低版本的IE浏览）
2.适用场景
（1）未知元素大小居中
（2）已知元素大小居中
3.实现步骤
（1）给父元素开启弹性盒子布局或者网格布局
/*开启弹性盒子布局*/
display:flex;
/*开启网格布局*/
display:gird;
（2）子元素设置margin值实现居中
marign：auto;
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 未知大小元素在父元素中水平垂直居中</title>
<style>
.box {
height: 100px;
width: 200px;
border: 1px solid #222222;
/* display: flex; */
display: grid;
}
.child{
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">flex或gird居中</div>
</div>
</body>
</html>
CSS布局：元素水平垂直居中的更多相关文章
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- CSS实现元素水平垂直居中—喜欢对称美，这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- css：元素水平垂直居中的多种方式
CSS元素(文本.图片)水平垂直居中方法 1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...
- CSS实现元素水平垂直居中
我们知道,实现元素的水平居中比较简单,在设置了宽度后,设置左右margin为auto就可以. 但是如何设置元素垂直居中呢? 当然,对于单行的文字,可以通过设置line-height来解决, 可以对于一 ...
- CSS实现元素水平/垂直居中的方法
首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: 1 2 3 4 body{ wi ...
随机推荐
- 《ElasticSearch6.x实战教程》之实战ELK日志分析系统、多数据源同步
第十章-实战:ELK日志分析系统 ElasticSearch.Logstash.Kibana简称ELK系统,主要用于日志的收集与分析. 一个完整的大型分布式系统,会有很多与业务不相关的系统,其中日志系 ...
- 《VR入门系列教程》之4---运行平台
运行平台 大多数的VR应用都可以在目前多数的PC和手机上运行,基本上一个不太旧的PC或者配置好点的笔记本电脑都可以正常运行Oculus Rift,如果手机的CPU和显卡不错的话也可以有很好的V ...
- Supalle-Admin-Layout，一个PC端和手机端都合适用的后台页面模板
Supalle-Admin-Layout主要使用有Vue.Element-UI.layui-icon,Ajax实现采用Fetch(是有这个打算,不过目前是jQuery.). 源码地址:https:// ...
- .Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能
前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. ...
- python基础——变量
变量是只不过保留的内存位置用来存储值.这意味着,当创建一个变量,那么它在内存中保留一些空间. 根据一个变量的数据类型,解释器分配内存,并决定如何可以被存储在所保留的内存中.因此,通过分配不同的数据类型 ...
- spring使用thymeleaf
一.spring使用thymeleaf做解析器其实很简单,这是基于xml配置的方式 <?xml version="1.0" encoding="UTF-8" ...
- Linux命令之文件相关
cd 绝对路径相对路径 --转到对应目录 touch-a --更新访问时间 touch -m --更新修改时间(ls -l只能显示修改时间) touch -t [[cc]yy]mmddhhmm[ss] ...
- 第二章、Go-基础语法
2.1.变量定义 (1)第一个程序helloworld package main import( "fmt" ) func main() { fmt.Println("h ...
- solr 新建core
D:\tomcat\webapps\solr\solr_home 在该路径下创建一个新的core,所需文件和层级如下 test_core |-- conf |-- schema.xml |-- sol ...
- JS 中获得根目录
/*** * 获得根目录 * @returns */ function getRootPath() { var strFullPath = window.document.location.href; ...