水平大家都知道,一般固定宽度给个margin:0 auto;就可以了。下面实现水平垂直都居中

HTML

<div class="parent">

</div>

css

html,body{
width: 100%;
height: 100%;
}
.parent{
width: 750px;
height: 400px;
background: orange;
/*水平居中*/
margin: 0 auto;
position: relative;
top: 50%;
margin-top: -200px;/*高度的一半*/
}

都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);

CSS实现DIV水平 垂直居中-1的更多相关文章

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

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

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

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

  3. css让div水平垂直居中

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

  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. 【转】Windows Phone在隔离存储里存取图片文件

    一共两个页面,第一个为MainPage.xaml,代码如下: <!--ContentPanel - place additional content here--> <Grid x: ...

  2. 【Discuz】-QQ互联登陆提示错误信息:Unknown column 'conuintoken' in 'field list'

    提示信息 discuz! Database Error(1054) Unknown column 'conuintoken' in 'field list'REPLACE INTO common_co ...

  3. CSS实现水平居中的4种思路

    × 目录 [1]text-align [2]margin [3]absolute [4]flex 前面的话 水平居中是经常遇到的问题.看似方法较多,条条大路通罗马.但系统梳理下,其实都围绕着几个思路展 ...

  4. UVAoj 348 - Optimal Array Multiplication Sequence

    /* 题意:矩阵相乘的最少的步数 dp[i][j]=min(dp[i][j], dp[i][k]+dp[k+1][j]+num[i-1]*num[k]*num[j]); 表示的是第i个矩阵到第j个矩阵 ...

  5. Oracle常见错误

    1. Oracle无法动态注册 在SQL*PLUS下多次输入alter system register.监听器的状态始终显示为The listener supports no services. 可查 ...

  6. 牛顿法与拟牛顿法学习笔记(五)L-BFGS 算法

    机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要工作在于求解一个非线性极小化问题.在具体实现中,大多调用的是成熟的软件包做支撑,其中最常用的一个算法是 L-BF ...

  7. [python 译] 基于面向对象的分析和设计

    [python 译] 基于面向对象的分析和设计 // */ // ]]>   [python 译] 基于面向对象的分析和设计 Table of Contents 1 原文地址 2 引言 2.1 ...

  8. Windows Azure Service Bus (3) 队列(Queue) 使用VS2013开发Service Bus Queue

    <Windows Azure Platform 系列文章目录> 在之前的Azure Service Bus中,我们已经介绍了Service Bus 队列(Queue)的基本概念. 在本章中 ...

  9. Elasticsearch安装

    在启动或者安装ES之前,需要先下载JDK 1.7以上的版本,对于2.0来说,要求JDK1.8以上. 检查JDK的版本 使用命令: java -version echo $JAVA_HOME 查看JDK ...

  10. 开源的即时通讯框架 (endv.cn) (一)

    先实现几个常用基本功能, 1.富文本编辑器.文字的发送与接收 2.表情选择.插入.发送.读取 3.截图的插入.发送.接收 4.视频的获取.发送.接收 5.内存垃圾回收 客户端模拟服务端发送与接收 源码 ...