实现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. 更换SSL证书

    1.申请证书,需要提供完整域名(例如:xxx.aaa.com),会和证书完全匹配. 2.将证书上传到web服务器,例如我的nginx,在server中指定证书路径. 3.重启web服务器.(这个证书和 ...

  2. 《JAVA与模式》之合成模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述 ...

  3. POST 请求的 forHTTPHeaderField

    Response Headers(从服务器得到的回复的头) Field name Description Example Status Access-Control-Allow-Origin Spec ...

  4. Ubuntu Cannot run program "../SDK/build-tools/xxx/aapt": erro = 2 No such file or directory

    64位ubuntu Android Studio  Gradle编译时出现如下报错: java.io.IOException: Cannot run program "/home/king/ ...

  5. QuantLib 金融计算——修复 BatesProcess 中的两个 Bug

    QuantLib 金融计算--修复 BatesProcess 中的两个 Bug 我发现了 BatesProcess 中的两个 Bug: 基类 HestonProcess::factors 的返回值取决 ...

  6. SPSS学习系列之SPSS Text Analytics是什么？

    不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...

  7. kibana加访问控制时报错--Kibana did not load properly.Check the server output for more information.

    错误 在使用kibana的时候,我们需要对可以进行日志访问进行控制,x-pack插件是最好的选择,但是kibana的x-pack插件是收费的,我们本着节约资源的理念(公司的钱也是钱啊,哈哈),我决定使 ...

  8. [转]Extending the User Interface in Outlook 2010

    本文转自:https://msdn.microsoft.com/en-us/library/office/ee692172%28v=office.14%29.aspx#OfficeOLExtendin ...

  9. [转]数据库中Schema（模式）概念的理解

    在学习数据库时,会遇到一个让人迷糊的Schema的概念.实际上,schema就是数据库对象的集合,这个集合包含了各种对象如:表.视图.存储过程.索引等. 如果把database看作是一个仓库,仓库很多 ...

  10. api.setFrameGroupIndex

    设置 frame 组当前可见 frame setFrameGroupIndex({params}) params name: 类型:字符串 默认值:无 描述:frame 组名字 index: 类型:数 ...