求助各位大佬。。html 文字居中带背景还有更好的方法吗

题目要求效果图如下我现在是这样实现的

我只是想居中带背景而已

</body>
可是我总觉得这不是最佳的方案，请问各位大佬还有什么更好的方法吗

wukongkong

2017 年 4 月 8 日

设置了宽高，不需要设置 display: inline-block;，因为已经把固定了背景的长宽。

flex 方法，可以研究研究：
在外面套一层，我这里直接在 body 上面写了：
```js
body{
//设置 flex 方式
display: flex;
//容器内对齐方式
//垂直居中： align-items: center;
justify-content: center;
}

p{
background: #ebe4ff;
}
```

cheejay

2017 年 4 月 8 日

@wukongkong 感谢，但是似乎老版本例如 IE10 以下都不支持这种方式……

ferrum

2017 年 4 月 8 日

这个就是最常见的办法了，兼容性也好。不用想其他的了。

cheejay

2017 年 4 月 8 日

@wukongkong @bdbai @est @ferrum
感谢各位，我还是先这样用吧不折腾了……

Sparetire

2017 年 4 月 9 日

我就奇怪只是文字居中，为什么就没有人用 text-align: center 的。。不要 display: inline-block ，只要 text-align: center 就好

aaronlam

2017 年 4 月 9 日

@Sparetire 如果去掉了 display: inline-block 会不会背景就超出文字范围了？

kfll

2017 年 4 月 9 日

@aaronlam p span hello world endspan endp
p text-align center
p span background blue

IJustmaogepao

2017 年 4 月 10 日

给你代码。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
text-align: center;
}
span {
background-color: blue;
}
</style>
</head>
<body>
<div>
<span>asdf</span>
</div>
</body>
</html>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/353485

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.