css设置字体居中显示,CSS文字居中

本文首发于公众号：小夭同学，同步更新个人博客：故事胶片，转载请署名。代码不断更新中！！

Demo预览在这儿！！！！

代码预览Demo

1、利用line-height和vertical-align

html

<div class="box"> <span>测试文字</span></div>复制代码

css

.box{ width: 200px; height: 200px; overflow: hidden; background: #ccc; text-align: center;}.box span{ vertical-align: middle; line-height: 200px;}复制代码 2、利用display:table-cell实现水平垂直居中显示

html

<div class="table"> <span class="cell">测试文字测试文字测试文字测试文字</span></div>复制代码

css

.table{display: table;}.cell{ display: table-cell; vertical-align: middle; text-align: center;}复制代码 3、利用定位方式position+transform实现水平垂直居中显示

html

<div class="box"> <span>测试文字测试文字测试文字测试文字</span></div>复制代码

css

.box{ position: relative;}.box span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}复制代码 4、利用display：flex

html

<div class="flex"> <span>测试文字测试文字测试文字测试文字</span></div>复制代码

css

display:flex;flex-direction: row;justify-content: space-around; align-items: center;复制代码 5、利用display：box

html

<div class="box"> <span>测试文字测试文字测试文字测试文字</span></div>复制代码

css

display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;复制代码