如下：
1、line-height属性使文字垂直居中。
2、使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)。
3、使用绝对定位和transform进行垂直居中（未知元素高度）。
4、使用flex布局。
介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在黑马程序员学习时候就会有老师教过，知道盒子的自身长度和宽度，其实解决的思路是这样的：首们需要position:absolute;绝对定位。再使用margin负值的方法。负值的大小为此盒子自身宽度高度除以二。 代码如下:position: absolute;
top: 50%;
left: 50%;
margin-left: -自身盒子宽度/2;
margin-top: -自身盒子高度/2;不知道是否能够帮助到您，有帮助的话，请采纳，谢谢
以下方法适用于宽度小于P标签宽度的情况
HTML代码：
<p><img src="">
</p>
CSS代码：
text-align: center;
}
给p标签设置text-align:center;样式可实现居中
text-align 文本对齐方式，有left / center /right 3个值：
left 居左对齐
center 居中对齐
right 居右对齐
给P标签设置text-align：center就行了呀。因为默认是inline的格式。代码如下：
<p style="width: 1000px;min-height: 300px;text-align: center;border: 1px solid red;">
<img src="><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
div{
width:100px;
height:100px;
background:green;
position:absolute;
top:50%;
margin-top:-50px;
left:50%;
margin-left:-50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
垂直和水平居中，只要垂直居中的话css最后两行可以不要，如果要相对父级盒子垂直居中的话，给父级盒子设置position:relative;
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）