html代码：
<div id="box">
<div id="child">我是测试DIV</div>
</div>
css代码：
#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;
}
运行结果如下：
这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。
2 使用绝对定位和transform
html代码：
<div id="child">
我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
运行结果如下：
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
3 另外一种使用绝对定位和负外边距进行垂直居中的方式
html代码：
<div id="box">
<div id="child">我也是个测试DIV</div>
</div>
css代码：
#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;
}
运行结果如下：
这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。
4 绝对定位结合margin: auto
html代码：
<div id="box">
<div id="child">呆呆今天退役了(。﹏。)</div>
</div>
css代码：
#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;
}
运行结果如下：
这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然你也可以设为99999px或者-99999px无论什么，只要两者相等就行，这一步做完之后再将要居中元素的margin设为auto，这样便可以实现垂直居中了。
被居中元素的宽高也可以不设置，但不设置的话就必须是这种自身就包含尺寸的元素，否则无法实现。
5 使用padding实现子元素的垂直居中
html代码：
<div id="box">
<div id="child">今天西安的霾严重的吓人，刚看了一眼PM25是422</div>
</div>
css代码：
#box {
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: #F7A750;
line-height: 50px;
}
运行结果如下：
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。
这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
6 设置第三方基准
html代码：
<div id="box">
<div id="base"></div>
<div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>
</div>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 06);
line-height: 50px;
margin-top: -50px;
}
运行结果如下：
这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，那么此时该基准元素的底边线自然就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个margin-top，值的大小是它自身高度的一半取负，则实现垂直居中。
7 使用flex布局
html代码：
<div id="box">雾霾天气，太久没有打球了</div>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
运行结果如下：
这种方式同样适用于块级元素：
html代码：
<div id="box">
<div id="child">
程序员怎么才能保护好眼睛？
</div>
</div>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
#child {
width: 300px;
height: 100px;
background: #8194AA;
line-height: 100px;
}
运行结果如下：
flex布局（d性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下，想深入学习的小伙伴可以去看阮一峰老师的博客。（>
CSS是层叠样式表。下面，我们来看看怎么使用CSS让水平垂直都居中吧。
新建一张文档在桌面新建一张文本文档，改名为1txt，如下图所示：
基础代码然后打开文本文档，编写基础代码，再把桌面上的老虎引入进去，如下图所示：
后缀名然后把文本文档后缀名改为html，如下图所示：
运行网页然后在浏览器中运行网页，现在有了，只是还没有居中，居住代码要用CSS写，如下图所示：
CSS代码然后写上CSS代码，如下图所示：
垂直水平居中可以看到已经垂直和水平居中，如下图所示：
总代码 <!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
picTiger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1jpg">
</body>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>水平+垂直居中</title>
<style type="text/css">
div {
font-family: "microsoft yahei";
border: 5px solid #cce800;
}
container {
width: 600px;
padding: 10px;
margin: 10px auto;
background-color: gray;
}
vertical {
display: table-cell;
height: 400px;
padding: 5px;
text-indent: 2em;
vertical-align: middle;
background-color: #cce8cf;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 外层这个是为了实现水平居中 -->
<div class="container">
<div class="vertical">
测试垂直居中,即便是多行，我也还是垂直居中对齐的。
<h3>问题分析：</h3>
<p>1CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。</p>
<p>2Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。</p>
<p>3扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。</p>
</div>
</div>
</body>
</html>下边是运行出来的效果：
问题分析：
1
CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。
2
Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。
3
扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。
另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。采用css的flex布局实现最为简单有效。display: flex
<div class="box">
<div class="item">我要居中</div>
</div>
box {
display: flex;
width: 200px;
height: 200px;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
}CSS中定位背景的属性是：background-position，用法background-position 属性设置背景图像的起始位置。
你要水平居中可以：
div{background-position:center center}//第一个center是水平居中，第二个center是上下居中
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
以下是让div中的内容垂直居中的具体 *** 作方法：
1、首先我们准备好一个空的html结构的文档。
2、接下来我们要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。
3、接下来我们就在div中添加内容，如下图所示，运行后你会发现内容偏向于左上角。
4、下面我们给div设置水平居中，如下图所示，并且设置行高为div的高度，你会发现它水平垂直居中了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）