第一种：

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

<!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. Redis的Lists数据类型

    Lists 就是链表,相信略有数据结构知识的人都应该能理解其结构.使用Lists结构,我们可以轻松地实现最新消息排行等功能.Lists的另一个应用就是消息队列,可以利用Lists的PUSH操作,将任务 ...

  2. 3D开源推荐：3DWebExplorer

    开源网址:https://github.com/irconde/3DWebExplorer 介绍:演示如何内嵌Google Earth 插件,开发面向公众的3D旅游展示平台

  3. JavaScript基础入门知识

    JavaScript三种使用方式 JavaScript代码屏蔽 JavaScript内容显示的位置 JavaScript中的错误及解决方法 1.语法错误:通过控制台可以检查并解决. 2.逻辑错误:通过 ...

  4. EPS 转 pdf 在线

    EPS 转 pdf 在线网站 https://convertio.co/zh/eps-pdf/

  5. 面试题之----一次完整的HTTP请求过程

    当我们在浏览器的地址栏输入 www.linux178.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 以下过程仅是个人理解: 域名解析 --> 发起TCP的3次握手 --> ...

  6. PHP腾讯与百度坐标转换

    function coordinate_switch($a,$b){//百度转腾讯坐标转换 $a = Latitude , $b = Longitude $x = (double)$b - 0.006 ...

  7. SAPGUI里实现自定义的语法检查

    需求:在SAPGUI里点击这个语法检查的小图标或者直接按快捷键Ctrl+F2可以执行ABAP标准的语法检查. 如果需要实现SAPGUI里自定义的语法检查,比如,某团队强制要求应用程序类的每个方法的实现 ...

  8. C语言 Printf函数

    #include <stdio.h> int main(int argc, const char * argv[]) { // insert code here... printf(&qu ...

  9. IOS VLC （第三方音频）的使用

    使用注意 ● 注意点 ● 存放VLC的文件夹名不要有空格 ● 一旦执行过编译脚本sh,就别再修改存放VLC的文件夹名   编译 ● 打开最外层的工作空间 选择真机运行 编译 ● 一些简单的示例程序 集 ...

  10. Windows安装时的几个命令(摘录)

    Windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式. 1.在系统提示无法安装的那一步,按住“shift+f10”,呼出“cmd”命令符. 2.输入:diskpart,回车.进入diskpa ...