javascript中文本居中顯示的方法
在網(wǎng)頁制作中，常常會遇到文本居中顯示的問題。對于英文來說，文本居中顯示還好，但是對于中文來說，由于中文字符寬度不一，所以文本居中顯示會稍微有點(diǎn)棘手。本文將介紹javascript如何實(shí)現(xiàn)中文本居中顯示。
方法一：設(shè)置居中對齊
最基礎(chǔ)的一種方法就是在css中設(shè)置文本居中對齊，如下所示：

p{
text-align:center;
}

但是由于中文字符寬度不一，可能會導(dǎo)致不完美居中，所以我們需要輔助一些javascript代碼來實(shí)現(xiàn)。
方法二：計算文本寬度后再居中
使用javascript計算文本的寬度，并根據(jù)寬度設(shè)置一個左右的邊距，可以讓中文文本居中顯示。下面是具體實(shí)現(xiàn)：

//獲取元素
var p = document.getElementsByTagName('p')[0];
//獲取文本
var text = p.innerHTML;
//獲取文本的寬度
var width = p.offsetWidth;
//獲取每個字符的寬度
var per = width / text.length;
//設(shè)置左右邊距
p.style.paddingLeft = ((p.offsetWidth - width) / 2) + 'px';
p.style.paddingRight = ((p.offsetWidth - width) / 2) + 'px';

上面的代碼中，首先獲取了要居中顯示的元素p，然后獲取了p元素中的文本內(nèi)容。接著獲取文本的寬度并計算出每個字符的平均寬度per。最后通過設(shè)置左右邊距的方式，達(dá)到中文文本居中顯示的效果。
方法三：使用Flex布局
Flex布局是CSS3的新布局模式，它提供了一種靈活的方式來排列和對齊元素。
我們可以通過在容器上設(shè)置display:flex;，使其成為一個Flex容器。然后使用justify-content:center;將內(nèi)容水平居中對齊，即可實(shí)現(xiàn)中文文本居中顯示。下面是具體實(shí)現(xiàn)：

.container{
display:flex;
justify-content:center;
}

上面的代碼中，我們先找到容器元素.container，然后設(shè)置display:flex;使其成為一個flex容器。接著用justify-content:center;將內(nèi)容水平居中對齊。
總結(jié)：
以上三種方法都可以實(shí)現(xiàn)中文文本的居中顯示，我們可以根據(jù)實(shí)際情況選擇使用其中的一種方法。若不希望使用javascript代碼，可以使用方法二中的Flex布局，以達(dá)到更加簡潔的代碼。