最近有人问我怎么设置元素垂直居中？我....（这么基础的东西都不会？我有点说不出话来），  不过还是耐心的教了他几个方法，好吧教完他们，顺便把这些方法整理一下

第一种：通过设置成为表格元素的方式来实现垂直居中 （适应于父级有固定高度的元素）

　　第一步，写html代码，如下：

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="box-con">
　　　　　　　　　　<div class="content">
　　　　　　　　　　　　a001
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>

　　第二步：设置css　

　　1. 将父元素设置为表格元素： display: table;

　　2.将子元素设置为父元素表格的单元格： display: table-cell; 　　然后设置垂直居中：vertical-align: middle;

　　3.将内容水平居中 margin:0 uato; 这样就可以垂直和水平都居中了

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:80%;
　　　　　　　　　　height:500px;
　　　　　　　　　　padding:100px 0;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　background-color: #e4963c;
　　　　　　　　　　display: table; /*将父级元素设置成为一个块级表格元素*/
　　　　　　　　}
　　　　　　　　.box-con{
　　　　　　　　　　display: table-cell; /*将子元素设置成为父元素表格的单元格*/
　　　　　　　　　　vertical-align: middle; /*该属性设置元素内容的垂直对齐方式。*/
　　　　　　　　}
　　　　　　　　.content{
　　　　　　　　　　width:50%;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　background-color: #f00;
　　　　　　　　}
　　　　　</style>
　　　</head>
　　　<body>
　　　　　<div class="box">
　　　　　　　<div class="box-con">
　　　　　　　　<div class="content">  　　//注：content 就是表格的内容，所以其实设置的就是这个div居中，去掉这个div,直接写内容也是直接将内容居中的

　　　　　　　　　　a001
　　　　　　　　</div>
　　　　　　 </div>
　　　　</div>
　　　</body>
　</html>

　注意：有时候会出现上边距比下边距多的问题，这样的话再父级设置font-size:0; 然后重新给内容设置font-size（因为父级设置了font-size:0;所以内容一定要设置了font-size才能正常显示）

　　效果图：（这个效果图不是这个代码出来的效果图，但是是一样的写法出来的效果图，这里多了一个内容002, 写来做对比用的）

　　

　　

第二种方法：通过改变布局的方式来实现

　　1.  给父级元素设置 display: flex; 设置为fiex布局 　　然后：align-items: center; 设置该元素的内容垂直居中

　　2.子级元素设置margin:0 auto;  水平居中

　　代码如下：　

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>元素垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:80%;
　　　　　　　　　　height:400px;
　　　　　　　　　　background-color: #d65412;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　display: flex;　　//将元素设置为fiex布局
　　　　　　　　　　align-items: center;　　//设置元素的内容垂直居中

　　　　　　　　　　justify-content:center;   /*将元素内容设置为水平居中*/ /*也可以在子元素中设置margin:0 auto;来水平居中*/

　　　　　　　　}
　　　　　　　　.content{
　　　　　　　　　　width:50%;
　　　　　　　　　　background-color: #ffaf0f;
　　　　　　　　　　/* margin:0 auto; */　//设置元素水平居中
　　　　　　　　　　text-align: center;
　　　　　　　　}
　　　　　　</style>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="content">
　　　　　　　　　　a001a
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>

　　效果图：

　　

第三种方法，通过设置margin 或 padding 来实现　　这个方法处理垂直居中是最灵活的，并且不用父级元素设置固定高度。

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8"/>
　　　　<title>垂直居中</title>
　　　　<style type="text/css">
　　　　　　.box{
　　　　　　　　width:85%;
　　　　　　　　background-color: #e4963c;
　　　　　　　　margin:0 auto;
　　　　　　　　padding:100px 0;  //通过给父级元素设置padding的方式来实现垂直居中

　　　　　　}
　　　　　　.boxs{
　　　　　　　　width:20%;
　　　　　　　　background-color: #f00;
　　　　　　　　margin:0 auto;　　//设置元素水平居中

　　　　　　　　text-align: center;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="box">
　　　　　　<div class="boxs">
　　　　　　　　a000
　　　　　　</div>
　　　　</div>
　　</body>
</html>

效果：

　　

　　毫无疑问这个方法是做好的方法，简单方便，并且没有父级高度限制，根据子级内容自动撑开不管什么时候都保持在父级元素中

当然还可以通过设置子级元素的外边距来实现，效果一样：

　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8"/>
　　　　　　<title>垂直居中</title>
　　　　　　<style type="text/css">
　　　　　　　　.box{
　　　　　　　　　　width:85%;
　　　　　　　　　　background-color: #e4963c;
　　　　　　　　　　margin:0 auto;
　　　　　　　　　　/*padding:100px 0;*/
　　　　　　　　　　overflow: hidden; //因为直接在子级元素设置margin会导致出现边距合并问题，所以加上overflow: hidden;是为了解决边距合并问题，让子元素的margin生效。
　　　　　　　　}
　　　　　　　　.boxs{
　　　　　　　　　　width:20%;
　　　　　　　　　　background-color: #f00;
　　　　　　　　　　margin:100px auto;    //设置上下边距一样，也就相当于对于父级元素垂直居中了
　　　　　　　　　　text-align: center;
　　　　　　　　}
　　　　　　</style>
　　　　</head>
　　　　<body>
　　　　　　<div class="box">
　　　　　　　　<div class="boxs">
　　　　　　　　　　a000
　　　　　　　　</div>
　　　　　　</div>
　　　　</body>
　　</html>

 

第四种方法，定位

　　使用定位来进行居中也是比较常用的，但是还是要设置父级高度的情况下才能使用，不够灵活。

　　这里要注意的是设置top:50%; left:50%;是指父级元素的中心点，子级内容从这里开始显示。

　　所以需要内容自身向左和向上偏移自身的一半，这样内容才是真正的居中。

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8"/>
　　　　<title>定位设置垂直居中</title>
　　　　<style type="text/css">
　　　　　　.box{
　　　　　　　　width:80%;
　　　　　　　　height:400px;
　　　　　　　　margin:0 auto;
　　　　　　　　background-color: #0f0;
　　　　　　　　position: relative;
　　　　　　}
　　　　　　.boxa{
　　　　　　　　width:30%;
　　　　　　　　background-color: #f00;
　　　　　　　　position: absolute;
　　　　　　　　top:50%;
　　　　　　　　left:50%;
　　　　　　　　transform: translate(-50%, -50%);

　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="box">
　　　　　　<div class="boxa">
　　　　　　　　a000sd
　　　　　　</div>
　　　　</div>
　　</body>
</html>

　　效果：

　　

好了，垂直居中就说到这里，还有其他更好的方法也欢迎留言。

css设置元素垂直居中的几个方法的更多相关文章

  1. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  3. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  4. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  5. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  6. css元素垂直居中的8中方法

    1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...

  7. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  8. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

  9. 使用CSS使内容垂直居中的N中方法。

    使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

随机推荐

  1. 切换windows系统输入法的中英文，可以忽视是哪种打字法

    调用windows的API //用户获取当前输入法句柄 [DllImport("imm32.dll")] public static extern IntPtr ImmGetCon ...

  2. ASP.NET Core WebApi使用Swagger生成API说明文档【特性版】

    ⒈新建ASP.NET Core WebAPi项目 ⒉添加 NuGet 包 Install-Package Swashbuckle.AspNetCore ⒊Startup中配置 using System ...

  3. python-day31(正式学习)

    一.单机架构 应用领域: 植物大战僵尸 office 二.CS架构 应用领域: QQ 大型网络游戏 计算机发展初期用户去取数据,直接就去主机拿,从这里开始就分出了客户端和服务端. 客户端:用户安装的软 ...

  4. QVector与QMap查找效率实战（QMap快N倍，因为QVector是数组，QMap是有序二叉树，查找的时候是N和LogN的速度对比）

    因为项目使用QVector,太慢了,听说QMap比QVector查找时快,所以写一个小程序试试: 从30000个数据中找5000个 程序运行截图如下: QVector QMap 一样的数据,找一样的数 ...

  5. git bash中不能显示中文

    git bash中不能显示中文 问题描述:当使用git log查看提交日志时,中文字符不能正常显示问题 1.首先把git的配置改一下 git config --global core.quotepat ...

  6. Centos固定IP

    centos7 联网 在虚拟机中以最小化方式安装centos7,后无法上网,因为centos7默认网卡未激活. 而且在sbin目录中没有ifconfig文件,这是因为centos7已经不使用 ifco ...

  7. Maven将java打包成jar并且运行笔记

    Maven项目打包成jar并且运行笔记 首先创建一个maven项目 运行成功后,有两种方式将项目进行打包. 第一种方式: 在IDEA编辑器中maven项目进行打包: 这里显示jar包中没有主清单属性, ...

  8. jquery 滚动事件-记录自己常用的

    1.h5端页面滑动至第3屏及以后才出现置顶按钮 $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 ...

  9. java 枚举enum的使用（与在switch中的使用）

    实际开发中,很多人可能很少用枚举类型.更多的可能使用常量的方式代替.但枚举比起常量来说,含义更清晰,更容易理解,结构上也更加紧密.看其他人的博文都很详细,长篇大论的,这里理论的东西不说了,一起看看在实 ...

  10. leetcode297. 二叉树的序列化与反序列化

    代码 /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * ...