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

　　平时大家写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. 亮瞎你狗眼的写代码体验狂拽酷炫效果 activate-power-mode

    年末了,整理一些收藏的资料,没想到发现一个敲代码的装逼神器; 话不多说上图 我是用idea装的,其他编辑器请自行查找 Preferences -> Plugins -> Install p ...

  2. 利用 IntelliJ IDEA 进行代码对比的方法

    Sometimes,我们会有这样的需求,即:想对比出两个不同版本代码的区别.如何实现? 第 1 种:如果我们是从 SVN 检出的项目,并且想比较本地代码与从 SVN 检出时的代码相比都有那些区别,可以 ...

  3. 高并发架构系列：Redis为什么是单线程、及高并发快的3大原因详解

    Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快: 2.redis是单线程的,省去了很多上下文切换线程的时间: 3.redis使用多路复用技术,可以处理并发的连接.非阻塞 ...

  4. Note: Time clocks and the ordering of events in a distributed system

    http://research.microsoft.com/en-us/um/people/lamport/pubs/time-clocks.pdf 分布式系统的时钟同步是一个非常困难的问题,this ...

  5. -fPIC编译选项

    -fPIC 作用于编译阶段,告诉编译器产生与位置无关代码(Position-Independent Code),则产生的代码中,没有绝对地址,全部使用相对地址,故而代码可以被加载器加载到内存的任意位置 ...

  6. 浏览器端-W3School-HTML：HTML DOM Script 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Script 对象 1.返回顶部 1. HTML DOM Script 对象 Script 对象 Script 对象表示 HTM ...

  7. 浏览器端-W3School-JavaScript：JavaScript RegExp 对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript RegExp 对象 1.返回顶部 1. JavaScript RegExp 对象 RegExp 对象 RegEx ...

  8. Android6.0运行时权限的处理Demo

    MainActivity.java package com.loaderman.permissionsdemo; import android.Manifest; import android.con ...

  9. 代码实现:企业发放的奖金根据利润提成。利润(I)低于或等于10万元时，奖金可提10%； 利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可可提成7.5%； 20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于40万元的部分，可提成3%； 60万到100万之间时，高于60万元的部分，可提成1.5%，高于100万元时，超过100万元

    import java.util.Scanner; /* 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成 ...

  10. properties文件的加载方式

    下面1-4的内容是网上收集的相关知识,总结来说,就是如下几个知识点: 最常用读取properties文件的方法 InputStream in = getClass().getResourceAsStr ...