实现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. [Noi2014]购票 斜率优化DP+可持久化凸包

    貌似网上大部分题解都是CDQ分治+点分治然后再斜率优化DP,我貌似并没有用这个方法. 这一题跟这题有点像,只不过多了一个l的限制 如果说直接跑斜率优化DP,存储整个序列的话,显然是不行的,如图所示(图 ...

  2. 【learning】 单调队列与单调栈用法详解

    1.单调栈 单调栈是指一个栈内部的元素具有严格单调性的一种数据结构,分为单调递增栈和单调递减栈. 其具有以下两个性质: 1,满足栈底到栈顶的元素具有严格单调性. 2,满足栈的先进后出特性,越靠近栈顶的 ...

  3. activiti插件安装-离线安装

    直接选择离线安装,在线因为网络问题,一直提示失败. 一.下载插件Activiti BPMN 2.0 designer 链接: https://pan.baidu.com/s/1gKBHZFnmNJx7 ...

  4. Python基础3：字符编码

    http://www.jb51.net/article/64917.htm Python 编码为什么那么蛋疼? https://i.cnblogs.com/EditPosts.aspx?postid= ...

  5. 剑指offer四十五之扑克牌顺子（序列是否连续）

    一.题目 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...

  6. wildfly8+jpa EntityBean 简单入门

    1)首先配置wildfly的数据源,我使用的是mysql数据库 1.jboss7开始,jboss使用模块化设计所以数据源的配置也是遵循模块化. 打开wildfly的安装目录进入modules\syst ...

  7. Qt: QTimer和QThread

    让QTimer 跑在其他线程. 一般写法如下. 1. 在main thread中为worker thread指定定时器. QThread* thread = new QThread(this); th ...

  8. Jmeter参数化与检查点

    一.Jmeter参数话有3种方法: 1. add->pre processors->user parameter(用户参数) 2.add->config Element->CS ...

  9. Android输入控件EditText和软键盘监听

    1. 跳转到新的页面自动软键盘显示情况: 在配置清单文件AndroidManifest.xml文件,对Activity的windowSoftInputMode属性进行设置. stateUnspecif ...

  10. javac之Inferring Type Arguments Based on Actual Arguments

    We use the following notational conventions in this section: Type expressions are represented using ...