整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：
<div class="container">
hi,imooc!
</div>css代码：
<style>
.container{
height:100px;
line-height:100px; /* 仅能用于单行文本 */
background:#999;
}
</style>垂直居中-图片以及行内块元素
<div class="container">
<img src="imgegs/icon.png" />
</div>css代码：
<style>
.container{
height:100px;
background:#999;
}
.container img{
vertical-align:middle;
}
</style>垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。
说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。
下面看一下例子：
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>css代码：
table td{height:500px;background:#ccc}因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本(方法二)
在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
垂直居中--方法三
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 300px;
background-color: orange;
}
/*
* 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px;
* 思路二：left:0;top:0;right:0;bottom:0;margin:auto;
* */
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /* 平移 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>实例1:将内层div的文本垂直居中
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
height:300px;
background:#ccc;
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
</body>
</html>实例2：将内层垂直居中、外层水平居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#content{
width:300px;
height:300px;
border:#000 solid 1px;
margin:auto;
display:table;
}
#wenzi{
border:#F00 solid 1px;
text-align:center;
display:table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
</body>
</html>实例3: 使用绝对定位垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 220px;
height: 280px;
background: url("img/王思聪.jpg");
position: absolute;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -140px;
}
</style>
</head>
<body>
<!--
行内元素(文本)->水平垂直居中
text-align: center;
line-height: height;
-->
<!--
块元素->水平垂直居中
margin: 0 auto;
-->
<div></div>
</body>
</html>实例4: 使用绝对定位垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 200px;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 5px;
/* 下面这种写法也可以让一个盒子居中 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div>您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗</div>
</body>
</html>绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。
解决办法：left:50%; margin-left:负的宽度的一半。（三句话）
div{
width: 600px;
height: 60px;
position: absolute; /* → 第一句 */
left: 50%; // /* → 第二句 */
top: 0;
margin-left: -300px; /*→ 第三句。宽度的一半*/
}实例4：使用绝对定位和margin:auto垂直居中
网站的布局是一个网站设计的根本，CSS的Grid布局已经成为了未来网站布局的基本方式。
今天这篇文章我们通过图文，一起看看如何自己实现Grid布局方式。
CSS
首先我们看看最基本的Grid布局是什么样的，HTML页面的代码如下所示。
HTML代码
然后设置其CSS属性，这里主要展示容器的CSS属性，给子元素添加的color属性就不在这里展示了。
CSS属性
在页面上看到的效果如下，目前因为没有对子div元素做任何设置，会自动将子div沿垂直方向排列。
页面效果
为了让外层的div(wrapper)为一个网格容器，需要设置其行数和列数，就像一个表格一样。
此时就需要用到grid-template-columns和grid-template-rows两个属性值。
grid-template-columns
用于设置网格容器的列属性，其实就相当于列的宽度。当我们需要几列展示时，就设置几个值，这个属性可以接收具体数值比如100px，也可以接收百分比值，表示占据容器的宽度。
需要注意的是：当给容器设定了宽度时，grid-template-columns设定的百分比值是以容器的宽度值为基础计算的。如果未设置宽度时，会一直向上追溯到设置了宽度的父容器，直到body元素。
比如我们设置了以下的CSS属性。
CSS属性
可以看出三列宽度加起来的百分比值为120%，而且wrapper容器并未设置宽度，会一直向上追溯到body元素，这样三列的总宽度已经超过了body的宽度，因此会出现滚动条。
页面效果
grid-template-rows
用于设置网格容器的行属性，其实就相当于行的高度，其特性与grid-template-columns属性类似。
下面简单修改grid-template-columns和grid-template-rows两个属性的值。
CSS值
得到的效果图如下所示。
效果图
接下来我们看看别的情况，通过CSS属性设置3*3的网格。
CSS属性
在页面上的呈现方式如下所示。
页面呈现
从页面上看我们看不出有什么问题，但是打开控制台后可以发现，这个网格已经占据了3*3的空间。它后面的元素只能排列在所有的网格后面。
页面实际情况
当我们需要得到特殊的排列方式，比如占满整行，占满整列，二三行合并等等。
这就需要用到grid-column和grid-row属性，表示行网线和列网线的序号。通过设置start和end值，来进行网格的合并。
网线序号
我们重新给wrapper容器内部的div添加class类。
HTML代码
然后添加以下的CSS代码，给不同的网格特定的行号和列号。
CSS代码
最终得到的效果图如下所示。
页面效果图
今天这篇文章介绍了CSS中Grid布局的基础知识，应该可以很快掌握，其他的复杂点的网格布局大家也可以自己去尝试。
做不是响应式的网页中，根据各自的需求，一般都给网页设定一定的版心，有时会遇到下面这个问题！
有一个通栏的100%上有背景色的DIV，然后版心设置1200px居中显示内容，当这网页随着浏览器窗口缩小后，缩小到出现横向滚动条，然后往右拉滚动条的话，这个含有背景色的DIV就会出现留白空隙！今天就来说说如何解决该问题！
先举个例子：
缩小浏览器出现滚动条后效果图：
把横向滚动条向右拉，超出视口的部分丢失了背景色：
解决方法：
在外层div上面设置min-width: 1200px;即可解决
外层div的宽度是100%，就是视口的大小，当视口被拉窄到小于内层div的宽度1200px时，比如800px，此时外层div宽度为800px，内层div宽度依然为1200px，而css中只设置了外层div有背景色，所以说只有800px那一部分会显示背景色，而超出视口的部分是属于内层div的，内层没有设置背景色，所以是空白！
*请认真填写需求信息，我们会在24小时内与您取得联系。
