中秋快到了，祝大家中秋快乐。

　　平时大家写bug过程中肯定会遇到让div框水平或者垂直居中，然而有时候能居中，有时候不能居中。我把平时遇到的一些方法写出来，如果对你有用，那便是晴天。

　　1、text-align: center;

text-align: center;

　　这个是最简单的了，实现文本水平居中。

　　2、margin： 0 auto;

　　0为上下边距为0，auto为左右边距自适应，于是变实现了水平居中。高度固定时，加上line-height就能实现垂直居中。代码如下：

 margin: 0 auto;

 height: 100px;

 line-height: 100px;<!-- 高度固定时使用 -->

　　3、子元素基于父元素实现居中

　　采用绝对定位，使子div框定位跟着父div框，再让子div框左右边距自适应，于是边形成了水平垂直居中。

　　效果如图1所示。

图1

　　代码如下：

 <!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>Document</title>

   <style>

     .parent {

       width: 200px;

       height: 200px;

       border: 1px red solid;

       margin:0 auto;

       position: relative

     }

     .child {

       width: 100px;

       height: 100px;

       border: 1px red solid;

       position:absolute;

       left: 0;

       right: 0;

       top:0;

       bottom:0;

       margin-left: auto;

       margin-right: auto;

       margin-top:auto;

       margin-bottom:auto;

     }

   </style>

 </head>

 <body>

   <div class="parent">

     <div class="child">

     </div>

   </div>

 </body>

 </html>

　　4、弹性盒子实现居中

 display: flex;

 align-items: center; /*定义父元素的元素垂直居中*/

 justify-content: center; /*定义子元素的里的元素水平居中*/

　　还有使用absolute与transform配合实现居中的，看小伙伴自己选择了。

　　本文到这里就结束了，中秋快乐，有缘再会。

css实现div水平垂直居中的更多相关文章

  1. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  2. css让div水平垂直居中

    示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...

  3. CSS实现DIV水平 垂直居中-1

    水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> ...

  4. Css控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  5. CSS控制DIV水平垂直居中

    <div style="position:absolute; width: 600px; height: 200px; left: 50%; top: 50%; margin-left ...

  6. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  7. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  8. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  9. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

随机推荐

  1. 第八周课程总结 & 实验报告（六）

    第八周课程总结 一.包装类 介绍 装箱与拆箱 应用 二.异常 基本概念 基本格式 异常类的继承结构 throws关键字 throw关键字 Exception类和RuntimeException类 自定 ...

  2. JDBC连接数据库遇到的“驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。

    要从旧算法列表中删除3DES: 在JDK 8及更早版本中,编辑该 /lib/security/java.security文件并3DES_EDE_CBC从jdk.tls.legacyAlgorithms ...

  3. ycache分布式缓存框架

    介绍   ycache是yhd的分布是缓存框架,设计目的是提供易扩展.高可靠的分布式缓存系统.ycache从全局视角分配和管理缓存,检测缓存的状态并做故障恢复.   当应用(应用:使用ycache的上 ...

  4. 怎么理解一个规模大且结构复杂的c工程源码

    很久以前,当要着手一个规模很大,结构复杂的c工程源码时,总是感觉无从下手.这个时候,一般google一下”XX源码分析“.当这个源码是很广泛使用的时,这样到也能得到不少启发:很不幸,经常要接触一些很少 ...

  5. LeetCode 516——最长回文子序列

    1. 题目 2. 解答 与最长回文子串类似,我们可以用动态规划来求解这个问题,只不过这里的子序列可以不连续.我们定义状态 state[i][j] 表示子串 s[i, j] 的最长回文子序列长度,那么状 ...

  6. PLSQL导出表的数据insert语句

    “Where clause”可以设置查询条件.设置好文件导出的路径(“Output file”),点击[Export]按钮,就可以导出INSERT语句了. 导出之后使用nodepad打开: 但是如果我 ...

  7. 本地git 添加多个远程仓库

    1.在本地找到,~/.ssh 文件夹 2.执行 ssh-keygen -t rsa -C "Winseek" -f "id-rsa-github" 3.生成了i ...

  8. 比较&关系运算符

    <1> 比较(即关系)运算符 python中的比较运算符如下表 运算符 描述 示例 == 检查两个操作数的值是否相等,如果是则条件变为真. 如a=3,b=3则(a == b) 为 true ...

  9. Nova rebuild for boot from volume issue

    目录 文章目录 目录 Nova boot from volume Rebuild Instance Rebuild for boot from volume Nova boot from volume ...

  10. 阶段3 2.Spring_10.Spring中事务控制_5 spring事务控制的代码准备

    创建一个工程,只搭建环境不做配置.等配置的时候把这个项目相关的代码再复制到新项目里面 jar包的打包方式 导入包 事务控制也是基于AOP的.所以这里导入aspectjweaver 复制jdbcTemp ...