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

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

　　第一步，写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. 【VS开发】字符，字节和编码

    字符,字节和编码 [原创文章,转载请保留或注明出处:http://www.regexlab.com/zh/encoding.htm] 级别:中级 摘要:本文介绍了字符与编码的发展过程,相关概念的正确理 ...

  2. json字段为null时输出空字符串

    Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(); jsonMa ...

  3. [Python3] 033 异常

    目录 异常 1. 简介 2. 异常的分类 3. 出现异常小例子 例子 4. 异常处理 5. 解决异常小例子 5.1 例子1 5.2 例子2 5.3 例子3 5.4 例子4 6. 手动引发异常 6.1 ...

  4. PTA(Basic Level)1060.爱丁顿数

    英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀自己的骑车功力,还定义了一个"爱丁顿数" E ,即满足有 E 天骑车超过 E 英里的最大整数 E.据说爱丁顿自己的 E 等于87. 现给 ...

  5. 【转帖】Gitlab 从 12.1 版本开始将不再支持 MySQL ！

    Gitlab 从 12.1 版本开始将不再支持 MySQL ! Gitlab 官方宣布,将从 12.1 版本开始不再支持 MySQL 数据库. http://news.51cto.com/art/20 ...

  6. 【经典问题】maximum subset sum of vectors

    AtCoder Beginner Contest 139 Task F Engines 题目大意 给定 $n$ 个二维向量,从中选出若干个,使得它们的和的模最大. 分析 这是一个经典问题,还有一种提法 ...

  7. USB键盘驱动分析

    简介 本文介绍USB驱动程序编写的流程,分析一个键盘的USB程序,基于linux-2.6.39 USB驱动概要 分层 主机层面的USB驱动的整体架构可以分成4层,自顶到下依次是 1.USB设备驱动:本 ...

  8. java中如果删除导入的jar包，工程出现叹号解决方案

    第一步:在工程上右键 第二步:选中build Path 第三步:选择Configue bulid path 第四步:选择liberary 第五步:鼠标点击带红色叉叉的 第六步:点击edit 第七步:点 ...

  9. c# ListView 简单操作

    1. 添加数据 listView1.Items.Clear(); for (int i = 0; i < 50; i++) { ListViewItem lv = new ListViewIte ...

  10. springboot(十六)-swagger2

    SpringBoot整合Swagger2 相信各位在公司写API文档数量应该不少,当然如果你还处在自己一个人开发前后台的年代,当我没说,如今为了前后台更好的对接,还是为了以后交接方便,都有要求写API ...