css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中？我....（这么基础的东西都不会？我有点说不出话来）， 不过还是耐心的教了他几个方法，好吧教完他们，顺便把这些方法整理一下
第一种：通过设置成为表格元素的方式来实现垂直居中 （适应于父级有固定高度的元素）
第一步，写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设置元素垂直居中的几个方法的更多相关文章
- css一个元素垂直居中的6种方法
方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- [转]-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 ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- css元素垂直居中的8中方法
1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- 【翻译】CSS水平和垂直居中的12种方法
英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...
- 使用CSS使内容垂直居中的N中方法。
使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: ...
随机推荐
- C++ 11的移动语义
目录 可拷贝和可移动的概念 移动构造函数和移动赋值函数 小结移动构造和移动赋值 std::move() 使用 std::move 实现一个高效的 swap 函数 Move and swap 技巧 参考 ...
- JAVA师徒架构班 - 带徒模式
(转: http://www.jeecg.org/forum.php?mod=viewthread&tid=2291&extra=page%3D1&page=1) 一个程序员技 ...
- superset连接sqlite频繁断开
出现上述现象的原因是SQLite只支持库级锁,不支持并发执行写操作,即使是不同的表,同一时刻也只能进行一个写操作.例如,事务T1在表A新插入一条数据,事务T2在表B中更新一条已存在的数据,这两个操作是 ...
- [LGP2791] 幼儿园篮球题
你猜猜题怎么出出来的? 显然第\(i\)场的答案为 \[ \frac{1}{\binom{n_i}{m_i}\binom{n_i}{k_i}}\sum_{x=0}^{k_i}\binom{n_i}{m ...
- CentOS 7 yum安装LAMP，LNMP并搭建WordPress个人博客网站
本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...
- (转)Dubbo服务暴露过程源码分析
参考
- 2.bash术语定义
2.术语定义POSIX:基于Unix的一系列操作系统可移植性的标准.Bash主要和POSIX标准第1003.1号中的<Shell和使用工具>有关.空白符:一个空格或者制表符.内部命令:在s ...
- [转载]MySQL之char、varchar和text的设计
[转载]MySQL之char.varchar和text的设计 来源:https://www.cnblogs.com/billyxp/p/3548540.html 首先我们先普及一下常识: 1.char ...
- Chrome去掉标签页8个框
最终效果: 解决思路: 在标签页鼠标右击弹出的菜单项中存在“查看页面源码”一项,由此可确定chrome的标签页是由一个html页面控制的,只要修改其页面源码便能去掉8个框. 经网上查阅确定了标签页的源 ...
- 正确的安装和使用nvm(mac)<转>
前言 目前主流的node版本管理工具有两种,nvm和n.两者差异挺大的,具体分析可以参考一下淘宝FED团队的一篇文章: 管理 node 版本,选择 nvm 还是 n? 总的来说,nvm有点类似于 Py ...