文字居中的方法：1、使用「text-align:center;」語句設定水平居中；2、利用CSS3的flex佈局設定垂直居中；3、使用「vertical-align:middle;display: table-cell;”語句設定垂直居中。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css設定文字水平居中
#在CSS中可以使用text-align屬性來設定字體水平居中。此屬性規定元素中的文字的水平對齊方式，透過使用center值設定文字居中。
text-align語法：
text-align : left | right | center | justify
text-align參數值與說明：
left : 左對齊
right : 右對齊
#center : 居中
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
width: 400px;
height: 100px;
background: palegoldenrod;
text-align:center;
}
</style>
</head>
<body>
<div class="box">css文本文字--水平居中</div>
</body>
</html>css影片教學）
css設定文字垂直居中
1、CSS3的flex版面 讓文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: palegoldenrod;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 文本文字--垂直居中（弹性布局）</div>
</body>
</html>
2、vertical-align:middle display:table-cell 讓文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box {
width: 300px;
height: 300px;
background: palegoldenrod;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div class="box">css 文本文字--水平居中</div>
</body>
</html>程式設計影片！ ！
以上是css怎麼把文字居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
