示例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. jsp连接MySQL操作GIS地图数据,实现添加point的功能

    index_map.jsp中的代码: <%@ page language="java" pageEncoding="utf-8"%> <%@ ...

  2. CentOS5.5下安装Ant

    从yum源直接下ant: [root@master local]$ yum install ant 运行ant,发现报错: java.lang.NoClassDefFoundError: org/ap ...

  3. css图片磨砂化

    Css代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...

  4. C程序设计语言练习题1-22

    练习1-22 编写一个程序,把较长的输入行”折“成短一些的两行或多行,折行的位置在输入行的第n列之前的最后一个非空格之后.要保证程序能够智能地处理输入行很长以及在制定的列前没有空格或制表符时的情况. ...

  5. oldboy第一天学习

    oldboy第一天学习 一.听Alex Li 吹牛逼! 1.老男孩附加的功能.每节课都有鸡汤.节省时间,投资自己.结识更多的朋友. 2.python的创始人为吉多·范罗苏姆(Guido van Ros ...

  6. JQuery的$和其它JS发生冲突的快速解决方法

    众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...

  7. Xcode中将图片放入Images.xcassets和直接拖入的区别

    将图片放入Images.xcassets 在mainBundle里面Xcode会生成一个Assets.car文件,将我们放在Images.xcassets的图片打包在里面.(程序会变大(?)) 无论是 ...

  8. Swift—Core Foundation框架-备

    Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风格的API比较麻烦,但是在OS X和iOS开发 ...

  9. 三分钟PJ隐藏SSID无线网络

    一般来说用户可以通过路由或主机设置来隐藏无线信号的SSID网络信息,在这种情况下我们使用XP系统自带的无线信号扫描工具将看不到该无线网络的踪影,在这种情况下XP系统无线信号管理工具只能够看到将SSID ...

  10. c#使用UIA进行模拟点击操作

    之前,我写过一篇c#使用spy进行模拟操作的文章,有朋友在留言中提到了UIA进行操作,今天也使用UIA重新实现一次对vnc窗体的控制测试. 实现目标 在server框内填入192.168.2.200 ...