实现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. 抓取出现时间3s后消失的元素

    背景:日常自动化脚本编写中,可能需要定位,获取元素的位置,通常会遇到一种元素,只出现几秒,几秒后慢慢消失的,这个时候,如果要抓取这个提示,如果和它比手速,当你手速比较快,可以箭头抓取到,但当这个元素的 ...

  2. 快捷键&小技巧

    shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...

  3. Pycharm常用快捷键，以及设置

    工欲善其事必先利其器,Python开发利器Pycharm常用快捷键以及配置如下,相信有了这些快捷键,你的开发会事半功倍 一 常用快捷键 编辑类: Ctrl + D             复制选定的区 ...

  4. 快速初步了解Neo4j与使用

    快速初步了解Neo4j与使用 Neo4j是一个高性能的,NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化 ...

  5. sersync+rsync=实时异步备份

    环境准备 服务器两台 rsync-server:192.168.1.8  (备份服务器) sersync-node1:192.168.1.9 (需要备份的服务器) 系统 CentOS7.4 关闭防火墙 ...

  6. java学习-java.lang.Math随机数生成

    java中的随机数,java.lang.Math.random()和java.util.Random.nextDouble() Math.random()方法是生成0.0---1.0区域内的随机数,每 ...

  7. Shiro的Filter机制详解---源码分析

    Shiro的Filter机制详解 首先从spring-shiro.xml的filter配置说起,先回答两个问题: 1, 为什么相同url规则,后面定义的会覆盖前面定义的(执行的时候只执行最后一个). ...

  8. ASP.NET 多环境下配置文件web.config的灵活配置---转

    注意:本功能在.Net Core中已经不可用,暂时需手动修改web.config中的信息,或者将其设置在appsettings.XXX.json中,然后再使用web.config中的环境变量来制定使用 ...

  9. 模块打包工具webpack

    1.webpack的安装 1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下) 1.2新建一个文件夹用于此项目  eg ...

  10. [转]NEO与以太坊：为什么NEO可能是2018年最强的加密货币

    本文转自:https://baijiahao.baidu.com/s?id=1591291802129464257&wfr=spider&for=pc NEO,它可以与以太坊竞争吗?N ...