第一种：

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

<!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. 【转】sqlserver字符串拆分(split)方法汇总

    Java..net等开发工具具有split功能,最近在Sqlserver中碰到这个需求. 方法1:动态SQL法 ),) set @string='1,2,3,4,5,6,7,8,9,10' set @ ...

  2. 【代码笔记】Java连连看项目的实现(2)——JTable 、TableModel的使用

    博客有时间就写写,所以一篇可能会拆成很多篇,写完后计划再合在一起. 首先肯定是要实现连连看的界面. 先准备连连看要的图片.. “LianLianKan”就是项目名称. 当然,如果小白看我的博客想学到什 ...

  3. javascript的对象创建模式---命名空间模式

    javascript中对象的概念是很普遍的,对象是是对象,数组是对象,函数也是对象,字符串其实也是对象.常见的对象创建方法有对象字面量.构造函数创建.我们先来看看对象的创建还有哪些更高级的模式. 一. ...

  4. Git 基本知识与常用指令

    一.Git代码状态转换图 其中: 未被Git跟踪的状态为unstage状态: 已被Git跟踪的状态为stage状态(stage:阶段),因此包括staging状态和staged状态. untrack ...

  5. Python学习系列提升篇------字符串

    字符串是python学习中重要的内容,在以后的工作中,对字符串的处理也必少不了.下面总结一下关于字符串学习的经验. 1.1 字符串的连接和合并 用‘ + ’连接,将两个字符串相加.       合并, ...

  6. Python学习系列----第六章 数据结构

    本章主要讲的是python中重要的四种数据结构,分别是列表.元组.字典和集合. 6.1 列表 list 是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目.列表中的项目应该包括在方括 ...

  7. SVNKit学习——svn二次开发背景和闲谈（一）

    开发背景: 简述现有流程:代码的合并.提交是以任务为最小单元的.例如A和B两个同学开发不同的任务,那就是两个任务号.合并的时候可能会先合并A的代码,在合并B的代码. 需求:SVN合并程序开发——一款能 ...

  8. [C#] SHA1校验函数用法

    首先引用这个命名空间 using System.Security.Cryptography; //建立SHA1对象 SHA1 sha = new SHA1CryptoServiceProvider() ...

  9. python中文入库

    http://www.cnblogs.com/evening/archive/2012/04/19/2457440.html 工作需要,将cvm.csv文件中的记录志入数据库, name, owner ...

  10. Flask入门模板Jinja2语法与函数(四)

    1 模板的创建 模板文件结构: project/ templates/ 模板文件 跳转模板一般使用: from flask import render_template,render_template ...