rem布局
动态计算html的font-size，核心是切换不同移动设备通过js获取设备宽度，然后按比例计算html的font-size的值，动态变化。
var d = document.documentElement;//获取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
- 设计稿横向分辨率为375（iphone6），计划20px为1rem；
- 布局的时候，各元素的css尺寸= 20 * （设备宽度/设计稿竖向分辨率）。 完整代码：
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'),
(function() {//判断是屏幕旋转还是resize
function c() {
var d = document.documentElement;//获取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
}
c();
return c;
})(), false);
元素居中
水平居中
- 通过margin: 0 auto; text-align: center实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 300px;
height: 300px;
}
#two{
background: blanchedalmond;
width: 150px;
height: 75px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
这里需要注意下父元素必须有指定的width和height。
- 通过display:flex实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
}
#two{
background: blanchedalmond;
width: 150px;
height: 75px;
align-self: center;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
这里需要注意下父元素必须有指定的width和height。父元素display:flex;子元素align-sekf:center;
- 通过display:table-cell和margin-left实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 300px;
height: 300px;
display: table-cell;
}
#two{
background: blanchedalmond;
width: 150px;
height: 75px;
margin-left: 75px;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。 使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。
- 通过position:absolute实现CSS水平居中,通过给父元素加绝对定位。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 300px;
height: 300px;
position: absolute;
}
#two{
background: blanchedalmond;
width: 150px;
height: 75px;
margin-left: 75px;
}
</style>
</head>
<body>
<div id="one">
<div id="two"></div>
</div>
对于父元素和子元素的宽度都确定的情况,使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。
- 通过width:fit-content实现CSS水平居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 600px;
height: 300px;
}
#two{
background: blanchedalmond;
width:fit-content;
height: 75px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="one">
<div id="two" style="color: white">我是子元素</div>
</div>
这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。
- 通过display:inline-block和text-align:center实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 600px;
height: 300px;
display: inline-block;
}
#two{
background: blanchedalmond;
width:150px;
height: 75px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="one">
<div id="two" style="color: white"></div>
</div>
display:inline-block能改父元素内的子元素的表达样式，同样需要配合“margin: 0 auto; text-align: center”使用。
- 通过position:relative、float:left和margin-left实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 600px;
height: 300px;
position: relative;
}
#two{
background: blanchedalmond;
width:300px;
height: 150px;
float: left;
margin-left: 150px;
}
</style>
</head>
<body>
<div id="one">
<div id="two" style="color: white"></div>
</div>
需要注意的是父元素要有固定的width和height。
- 通过隐藏节点+float的方法实现CSS水平居中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:seagreen;
width: 600px;
height: 300px;
}
#hide{
width: 150px;
height: 150px;
float: left;
}
#two{
background: blanchedalmond;
width:300px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<div id="one">
<div id="hide"></div>
<div id="two"></div>
</div>
我们可以通过增加一个隐藏节点，然后使其float:left，这样子元素就会被隐藏节点推着水平居中。 这种增加隐藏节点方法也适用于CSS垂直居中，原理一样，但是不用float。
垂直居中
- 把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrapper{
display: table;
}
#cell{
display: table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
这里关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的td，th等等，而像div，span这样的元素是不行的。valign属性规定单元格中内容的垂直排列方式，语法：td valign="value"
- 这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 content 清除浮动，并显示在中间。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
</style>
</head>
<body>
<div id="floater">
<div id="content">Content here</div>
</div>
需要注意的是 IE(IE8 beta)中无效 无足够空间时，content 被截断，但是不会有滚动条出现
- 这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content {
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
需要注意的是只对文本有效，块级元素无效。多行时，断词比较糟糕。
- 使用绝对定位和负外边距对块级元素进行垂直居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">我是测试DIV</div>
</div>
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。
- 使用绝对定位和transform
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div id="box">
<div id="child">
我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>
</div>
- 另外一种使用绝对定位和负外边距进行垂直居中的方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 50%;
height: 30%;
background: pink;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}
</style>
</head>
<body>
<div id="box">
<div id="child">我也是个测试DIV</div>
</div>
margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。
- 绝对定位结合margin: auto
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 200px;
height: 100px;
background: #A1CCFE;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">呆呆今天退役了(。﹏。)</div>
</div>
把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然你也可以设为99999px或者-99999px无论什么，只要两者相等就行，这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。
- 使用padding实现子元素的垂直居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: #F7A750;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">今天西安的霾严重的吓人，刚看了一眼PM2.5是422</div>
</div>
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。
- 设置第三方基准
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6);
line-height: 50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="box">
<div id="base"></div>
<div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>
</div>
首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中。
- 使用flex布局
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="box">
<p>雾霾天气，太久没有打球了</p>
</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
#child {
width: 300px;
height: 100px;
background: #8194AA;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
程序员怎么才能保护好眼睛？
</div>
</div>
- 第二种使用弹性布局的方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
#child {
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div id="child">
答案当然是多用绿色的背景哈哈
</div>
</div>
- 使用 line-height 和 vertical-align 对图片进行垂直居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
#box img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="box">
<img src="duncan.jpeg">
</div>
