在Web開發中，居中對齊是一個非常常見的需求。而JavaScript是實現這一需求的重要工具之一。本文將介紹幾種常用的JavaScript居中對齊方法，并提供實例代碼。

1. 水平居中對齊

// 已知元素寬度
var element = document.getElementById("example");
var marginLeft = (window.innerWidth - element.offsetWidth) / 2;
element.style.marginLeft = marginLeft + "px";
// 寬度未知
var element = document.getElementById("example");
element.style.margin = "0 auto";

2. 垂直居中對齊

// 已知元素高度
var element = document.getElementById("example");
var marginTop = (window.innerHeight - element.offsetHeight) / 2;
element.style.marginTop = marginTop + "px";
// 高度未知
var element = document.getElementById("example");
element.style.position = "absolute";
element.style.top = "50%";
element.style.transform = "translateY(-50%)";

3. 水平和垂直居中對齊

// 已知元素尺寸
var element = document.getElementById("example");
var marginLeft = (window.innerWidth - element.offsetWidth) / 2;
var marginTop = (window.innerHeight - element.offsetHeight) / 2;
element.style.marginLeft = marginLeft + "px";
element.style.marginTop = marginTop + "px";
// 元素尺寸未知
var element = document.getElementById("example");
element.style.position = "absolute";
element.style.top = "50%";
element.style.left = "50%";
element.style.transform = "translate(-50%, -50%)";

4. 在父元素中居中對齊

var parent = document.getElementById("parent");
var element = document.getElementById("example");
element.style.position = "absolute";
element.style.top = "50%";
element.style.left = "50%";
element.style.transform = "translate(-50%, -50%)";
parent.style.position = "relative";

總結

本文介紹了幾種常用的JavaScript居中對齊方法。每種方法都有其特定的使用場景。在使用時，請根據具體情況選擇最適合的方法。代碼實例可供參考，希望對大家編寫居中對齊的JavaScript代碼有所幫助。