实现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. python基础知识input到while循环

    j周笔记 输入与输出 1.输入 input ('请输入内容')= 字符串 2.输出 print(输出到控制台) 变量vairable               变量就是相当于我们人的名字 1.名字 ...

  2. mysql_load_data及权限管理

    ———————————————————————————————————————— 添加权限: The only priv_type values you can specify for a table ...

  3. 深入set和dict

    一. 浅拷贝和深拷贝   浅拷贝:就是创建一个具有相同类型,相同值但不同id的新对象.  浅拷贝产生的新对象中可变对象的值在发生改变时,会对原对象的值也做出改变,因为这些值是同一个引用. a = [1 ...

  4. 快速滑动时 `cellForRow` 的调用次数

    问题 有一个 1000 个 cell 的 tableView,刚刚进入界面时,contentOffset 为 0.用手快速滑动 tableView,直至最下面一个 cell 显示在屏幕上. 这个过程中 ...

  5. leetcode-914-卡牌分组

    题目描述: 给定一副牌,每张牌上都写着一个整数. 此时,你需要选定一个数字 X,使我们可以将整副牌按下述规则分成 1 组或更多组: 每组都有 X 张牌. 组内所有的牌上都写着相同的整数. 仅当你可选的 ...

  6. 【ARC072F】 Dam 单调队列

    题目大意: 有一个水库,容量为$L$,一开始是空的.有$n$天. 对于第i天,每天早上有$v_i$单位的,水温为$t_i$的水流进来.每天晚上你可以放掉一些水,多少自定.但是必须保证第二天水库不会溢出 ...

  7. 手把手教你如何安装和使用Karma-Jasmine

    注意:本文中出现的资料链接.karma的插件安装等,均可能需要翻$墙后才能正确执行. Jasmine是一个Javascript的测试工具,在Karma上运行Jasmine可完成Javascript的自 ...

  8. WinForm—控制文本框只能输入整数（包括小数）

    //控制控件输入的是正数(包括小数) private void txt_Weight_KeyPress(object sender, KeyPressEventArgs e) { //第一步:判断输入 ...

  9. CSS学习笔记（基础篇）

    CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. 样式表书写位置: <head> < ...

  10. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...