第一种：

父容器不设置宽度，用定位实现水平垂直居中。

<!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>实现垂直居中</title>
<style>
.father{
height: 1000px;
background-color: hotpink;
position: relative;
}
.son{
width: 200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0px 0px -100px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

第一种：

用flex实实现水平垂直居中。这个是最常见的方法，经常会用到的。

父容器

.father{
height: 500px;
background-color: hotpink;
display:flex;
}
子容器
.son{
margin:auto;
background-color: skyblue;
width: 100px;
height: 100px;
}
这样就实现了水平垂直居中啦
 
最后一种也是常用的水平垂直居中方法：直接上代码
 
.containter{
height: 1200px;
background-color: lavender;
display: flex;
flex-wrap: wrap;
}
.item1,.item2,.item3,.item4 {
width: 450px;
height: 500px;
vertical-align: middle;
display: table-cell;
margin:auto;
text-align: center;
}
.item1 img,.item2 img,.item3 img,.item4 img {
display:inline-block;
width: 450px;
height: 500px;
}
<div class="containter">
<div class="item1"><img src="img/img-27f9268b8eec512d3a105dc2332845bd(1).jpg" alt=""></div>
<div class="item2"><img src="img/img-3cf02d3a912a0b2e4fe8f37bd1ad3476.jpg" alt=""></div>
<div class="item3"><img src="img/img-6fd020679750aaf7015245a84188c410.jpg" alt=""></div>
<div class="item4"><img src="img/img-b69563d9e8a36206cb8f8fe5c9e2d25f.jpg" alt=""></div>
</div>

Web前端几种常见的实现水平垂直居中的方法的更多相关文章

  1. WEB前端性能优化常见方法

    1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/arti ...

  2. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

  3. 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...

  4. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  5. css3种不知道宽高的情况下水平垂直居中的方法

    第一种:display:table-cell 组合使用display:table-cell和vertical-align.text-align,使父元素内的所有行内元素水平垂直居中(内部div设置di ...

  6. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  7. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  8. css 水平垂直居中的方法总结

    在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...

  9. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

随机推荐

  1. Django的模型层

    一.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  2. mui使用技巧

    1.document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用,否则会出 ...

  3. Popularize what is heart of mobile phone?

    From: http://tech.sina.com.cn/mobile/n/2014-09-29/08399657494.shtml 只谈核数没意义 带你重新认识手机SoC 2014年09月29日  ...

  4. 从虚拟机角度看Java多态->（重写override）的实现原理

    工具与环境:Windows 7 x64企业版Cygwin x64jdk1.8.0_162 openjdk-8u40-src-b25-10_feb_2015Vs2010 professional 0x0 ...

  5. python里面的encode和decode函数

    转自 http://www.cnblogs.com/evening/archive/2012/04/19/2457440.html 总结一句话 encode:    字符串打算输出(给别人用)比如pr ...

  6. jsencrypt代码分析——openssl的rsa加密解密在js的实现

    在js上做rsa,感觉jsencrypt这个是封装的比较好的,但用起来还是遇到了些坑,所以踩进代码里填填坑- 项目在这里 https://github.com/travist/jsencrypt [r ...

  7. May 26th 2017 Week 21st Friday

    One thorn of experience is worth a whole wilderness of warning. 一次痛彻心扉的经历,抵得上千百次的告诫. Several days ag ...

  8. Git warning push.default is unset

    warning: push.default is unset; its implicit value is changing in Git 2.0 from 'matching' to 'simple ...

  9. SpringCloud实战4-Hystrix线程隔离&请求缓存&请求合并

    接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...

  10. 转载：em（倍）与px的区别

    转载出处:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理 ...