示例1:

.div1{
width:200px;
height:300px;
border:1px solid #000;
position: relative;
}
.div2{
width: 40px;
height:40px;
background:green;
position: absolute;
margin: auto;
top:;
left:;
right:;
bottom:;
}

示例1 css部分

<div class="div1">
<div class="div2">居中</div>
</div>

示例1 html部分

示例2:

.div3{
width:200px;
height:300px;
border:1px solid #000;
display: table-cell;
vertical-align: middle;
}
.div4{
width: 40px;
margin: 0 auto;
}

示例2 css部分

<div class="div3">
<div class="div4">居中</div>
</div>

示例2 html部分

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

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

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

  2. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  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. 全世界最详细的一步一步搭建RAC步骤(一)---安装操作系统RHEL4.6【weber出品】

    全文搭建RAC分为3步骤 <--安装操作系统RHEL4.6> <--配置ASM+裸设备> <--安装集群软件>       <--安装数据库软件>   ...

  2. 单例模式 与lock用法

    在之前没用lock之前:如果我实现单例模式:直接就是下面的代码: public class Singleton    {        private static Singleton instanc ...

  3. SQL server概述

    sqlserver中包含的对象: 数据库.事务日志.索引.文件组.数据库关系图.视图.存储过程.用户自定义函数.用户.角色.程序集.表.报表.全文目录.用户自定义数据类型 数据库实际上是最高层对象,其 ...

  4. 摘抄官方文档: spring boot配置 iframe同源可访问

    使用java配置,跟spring security配置在一起 @EnableWebSecurity public class WebSecurityConfig extends WebSecurity ...

  5. Qt Quick App的两种启动模式

    QQmlApplicationEngine搭配Window QQuickView搭配Item 两者不同之处在于: 使用QQuickView显示QML文档,对窗口的控制权(比如设置窗口标题.Icon.窗 ...

  6. android开发——数独游戏

    最近研究了一下android,写了一个数独游戏,具体如下: 游戏界面需要重写一个ShuduView继承View, 然后自定义一个Dialog: 1.需要继承 Dialog 类, 2.并要定义一个有参构 ...

  7. jquery validation插件使用

    首先需要引入jQuery.js和jquery.validate.js 以下面代码为例: <form id="mainform"> <fieldset> &l ...

  8. 网页、php脚本的编码问题

    对于程序的编码问题,做一次总结,我们清楚,从对象来说,编码可能涉及到三到四个对象 一.首先是请求终端: 这个请求终端有可能是浏览器端,从浏览器端发起网页请求:Ajax请求:也有可能是程序内部的Api调 ...

  9. var genreModel =storeDB.Genres.Include("Albums").Single(g => g.Name == genre);是什么意思?

    g => g.Name == genre代表一个匿名函数.即这里向Single方法传入了一个方法类型的参数. =>左边的g代表方法的参数,可以有多个,如(g,f) => ...,=& ...

  10. UIApplication-备用

    iPhone应用程序是由主函数main启动,它负责调用UIApplicationMain函数,该函数的形式如下所示: int UIApplicationMain ( int argc, char *a ...