css+div水平居中
实现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水平居中的更多相关文章
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- [转]CSS网页布局：div水平居中的各种方法
http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- css如何实现水平居中呢？css实现水平居中的方法？
面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...
- div水平居中
1.先给它外层的div定位并left:position:absolute;left:50%; 2.获取当前元素div的宽度,并除以2 3.改变它的css:margin-left:-(获取当前元素div ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
随机推荐
- 结合 RunLoop 和 Instrument 定位卡顿
iOS 应用,丝般顺滑的理想情况就是 60FPS (对于 iPad Pro 是 240FPS),即在 16ms 之内完成一次渲染.如果找到在每次渲染花费了多久,究竟做了什么事情,那么就可以进行针对性的 ...
- c#连接oracle的几种方式
一:通过System.Data.OracleClient(需要安装Oracle客户端并配置tnsnames.ora)1. 添加命名空间System.Data.OracleClient引用2. usin ...
- An assembly specified in the application dependencies manifest
.Net Core 运行的时候报错 An assembly specified in the application dependencies manifest (xxx.deps.json) was ...
- python strip()函数的用法
函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.lstrip(rm) 删除s字符串中 ...
- [webrtc] RTX的处理
以前笔记,整理 webrtc中默认开启rtx用于丢包重传,rtx的介绍可以参考rfc4588,https://tools.ietf.org/html/rfc4588#section-4 rtx使用额外 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【Java并发编程】：多线程环境中安全使用集合API
在集合API中,最初设计的Vector和Hashtable是多线程安全的.例如:对于Vector来说,用来添加和删除元素的方法是同步的.如果只有一个线程与Vector的实例交互,那么,要求获取和释放对 ...
- 【数组】Best Time to Buy and Sell Stock I/II
Best Time to Buy and Sell Stock I 题目: Say you have an array for which the ith element is the price o ...
- web前端之JavaScript
JavaScript概述 JavaScript历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司.由于网景公司希望能在静态HTML ...
- Chapter 3 Phenomenon——18
My intuition flickered; the doctor was in on it. 我的直觉告诉我:这个医生也参与了. 我灵光一闪:这医生熟悉内情. "I'm afraid t ...