本文介绍了多种CSS方法实现元素的水平和垂直居中。对于水平居中，包括了text-align:center用于行内元素，margin: auto用于定宽块级元素，以及利用table、display:inline和浮动定位等方法。对于垂直居中，提到了高度确定的单行或多行文本的解决方案，如通过line-height和使用table布局。
多种方法实现水平居中和垂直居中
一、水平居中（包含块中居中）
-
对于行内元素，在父级块级元素css属性中使用 text-align：center即可。
-
对于width固定的块级元素，使用margin:20px auto; / margin-left 与 margin-right 设置为 auto*
-
对于width不固定的块级元素：
1、使用table标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
第三步：把需要水平居中的元素放到table标签中的td标签中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:20px auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table><tbody>
<tr><td>
<p>设置我所在的div容器水平居中 </p>
</td></tr>
</tbody>
</table>
</body>
</html>
2、改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset
最低0.47元/天 解锁文章
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
