JavaScript中實現水平居中的方法有很多種，下面就分別介紹幾種常用的方法以及實現的原理。

第一種方法是使用CSS的text-align屬性，將父元素的text-align屬性設置為"center"即可。例如：

<div style="text-align: center;">
<p>這是要居中的內容</p>
</div>

使用這種方法需要注意的是，父元素需要有寬度才能起作用，否則對齊會失敗。舉個實例：

<div style="width: 500px; border: 1px solid black; text-align: center;">
<p>這是要居中的內容</p>
</div>

這段代碼中，父元素div設置了寬度為500px，并加上了1px的黑色邊框，這樣就可以看到內容在中心對齊了。

第二種方法是使用CSS的flex布局，將父元素設置為display: flex，再設置justify-content和align-items屬性為center即可。例如：

<div style="display: flex; justify-content: center; align-items: center;">
<p>這是要居中的內容</p>
</div>

使用flex布局的好處在于可以居中多個元素，同時可以在不同方向上進行居中。

第三種方法是使用JavaScript動態計算元素的寬度和高度，再根據計算出的值設置元素的樣式。例如：

<script>
var content = document.getElementById("center");
var width = content.offsetWidth;
content.style.marginLeft = "-" + width/2 + "px";
</script>
<div id="center" style="position: absolute; left: 50%; top: 50%;">
<p>這是要居中的內容</p>
</div>

這段代碼會先獲取元素的寬度，然后將元素的左邊距設置為負的寬度的一半，這樣就可以實現水平居中了。需要注意的是，使用這種方法需要將元素的position屬性設置為absolute。

以上就是幾種常用的JavaScript實現水平居中的方法，每種方法都有自己的優缺點，需要根據實際的需求選擇合適的方法。