第一种：

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

<!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. solidity语言

    IDE:Atom 插件:autocomplete-solidity 代码自动补齐   linter-solium,linter-solidity代码检查错误   language-ethereum支持 ...

  2. 02.List泛型集合

    List泛型可以转换成数组 List泛型和数组的相同点: List泛型的数据类型必须是指定的,数组的数据类型也必须是指定的. List泛型和数组的不同点: List泛型的长度是随意的,而数组的长度必须 ...

  3. Java反射机制集中学习

    什么是反射 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方法的功能称为java语言 ...

  4. CSS中关于linebox的baseline位置移动的理解

    前言 最近看到一篇文章,弗里得木的翻译笔记,里面有个问题没有解决,就是linebox的baseline为什么会移动呢? 在讨论这个问题之前读者需要对 默认值baseline 以及 其他属性值(天镶的博 ...

  5. Disruptor之粗糙认识

    一 概述 1.Disruptor Disruptor是一个高性能的异步处理框架,一个“生产者-消费者”模型. 2.RingBuffer RingBuffer是一种环形数据结构,包含一个指向下一个槽点的 ...

  6. 使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到 ...

  7. 使用weinre调试Web应用及PhoneGap应用

    Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试.但是,当我们期望为移动Web站点或应用进行调 ...

  8. 任务二：零基础HTML及CSS编码练习

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

  9. Qt删除文件夹

    写的软件需要进行文件夹的复制,开始不怎么懂就找了个拷贝文件夹的代码测试了一下,运行程序选择了源目录和目标目录相同进行拷贝,结果悲剧了.因为是递归拷贝,导致文件夹被嵌套N层,软件死机,强制结束后,产生的 ...

  10. solidity语言4

    引用类型(Reference Types) memory 不支持持久保存 storage 保留为变量 复杂类型如arrays和structs,有附加信息,'data location',提示存储在'm ...