实现div内容水平居中

实现方案一：margin:0 auto;

div{

     height:100px;

     width:100px;

     background:red;

     margin:0 auto;

  }

　　

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>div水平居中</title>

	</head>

	<body>

		<div></div>

	</body>

</html>

　　

实现div水平居中方案二：position：absolute;绝对定位

div{

    height:100px;

    width:100px;

    background:red;

    position:absolute;

   left:50%;

   right:50%;

   margin: auto;

}

实现div水平垂直居中

实现方案一：position:fixed;固定定位

div{

                height:100px;

                width:100px;

                background:red;

                position:fixed;

                left:;

                top:;

                bottom:;

                right:;

                margin:auto;

            }

实现方案二：position:absolute;绝对定位

div{

                height:100px;

                width:100px;

                background:red;

                position:absolute;

                left:;

                top:;

                bottom:;

                right:;

                margin:auto;

            }

实现方案二：css3+position;

div{

                height:100px;

                width:100px;

                background:red;

                position:absolute;

                left:50%;

                top:50%;

                transform:translate(-50%,-50%);

            }

transform为css3的新增属性，因此需要加上前缀，兼容手机和其他的浏览器。如

-ms-transform:translate(-50%,-50%); /* IE 9 */

-moz-transform:translate(-50%,-50%); /* Firefox */

-webkit-transform:translate(-50%,-50%);/* Safari and Chrome */

-o-transform:translate(-50%,-50%); /* Opera */

css+div水平居中的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  3. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  4. css如何实现水平居中呢？css实现水平居中的方法？

    面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...

  5. div水平居中

    1.先给它外层的div定位并left:position:absolute;left:50%; 2.获取当前元素div的宽度,并除以2 3.改变它的css:margin-left:-(获取当前元素div ...

  6. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  7. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  8. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  9. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

随机推荐

  1. ES6新增变量

    声明let let 声明的变量不存在预解析 console.log(flag) var flag = 123 //123 let flag = 456 //undefined let声明的变量不允许重 ...

  2. SQL一些问题

    什么是索引: 一般说法:索引是与表关联的磁盘上结构,可以加快从表中检索行的速度.索引包含由表中的一列或多列生成的键.这些键存储在一个结构中,使 SQL Server 可以快速有效地查找与键值关联的行. ...

  3. mapreduce程序的按照key值从大到小降序排列

    在近期的Hadoop的学习中,在学习mapreduce时遇到问题:让求所给数据的top10,们我们指导mapreduce中是有默认的排列机制的,是按照key的升序从大到小排列的 然而top10问题的求 ...

  4. 数据结构---平衡查找树之B树和B+树（转）

    本文转载自:http://www.cnblogs.com/yangecnu/p/Introduce-B-Tree-and-B-Plus-Tree.html 前面讲解了平衡查找树中的2-3树以及其实现红 ...

  5. css之px自动转rem—sublime 插件CSSREM

    CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

  6. Excel中线性规划求解

    Excel中线性规划求解(如下图) 1. 设置目标输出单元格(蓝线线) 2. 设置线性规划模型目标函数中自变量(红线线) 3. 设置约束条件(黑色线) 4  如果目标函数中自变量要求是非负数,则勾选绿 ...

  7. openssl生成RSA格式的公私钥，并转为pkcs8格式

    第一步:生成私钥,这里我们指定私钥的长度为2048 openssl genrsa -out rsa_private_key.pem 2048 第二步:根据私钥生成对应的公钥: openssl rsa ...

  8. 【链表】Add Two Numbers

    题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...

  9. IntelliJ IDEA的黑白色背景切换（Ultimate和Community版本皆通用）

    不多说,直接上干货! IntelliJ IDEA的黑白色背景切换 File    ->   Setting    ->  Editor     ->   Colors & F ...

  10. 机器学习--boosting家族之Adaboost算法

    最近在系统研究集成学习,到Adaboost算法这块,一直不能理解,直到看到一篇博文,才有种豁然开朗的感觉,真的讲得特别好,原文地址是(http://blog.csdn.net/guyuealian/a ...