在HTML5中，居中對齊是一種常見的樣式設置，可以讓文本、圖像或其他元素在頁面中垂直和水平居中，使頁面看起來更加美觀和易讀。

實現居中對齊可以使用多種技術，包括CSS、JavaScript和使用現成的庫和框架。在這里，我們將介紹三種基本的HTML5居中對齊設置方法。

CSS居中對齊

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

使用CSS的flex布局可以輕松地將元素垂直和水平居中，只需要將容器元素的display屬性設置為flex，然后使用justify-content和align-items屬性分別設置水平和垂直居中方式即可。

JavaScript居中對齊

let element = document.querySelector('.box');
let height = element.offsetHeight;
let width = element.offsetWidth;
element.style.top = Math.max((window.innerHeight - height) / 2, 0) + 'px';
element.style.left = Math.max((window.innerWidth - width) / 2, 0) + 'px';

JavaScript方法可以使用代碼計算出元素的高度和寬度，然后使用視口寬度和高度計算出元素的位置，并將其應用于樣式。

HTML框架居中對齊

Hello, World!

許多流行的HTML框架，如Bootstrap和Foundation，都提供了內置的類和樣式來實現居中對齊。在這個例子中，我們使用Bootstrap的.text-center類將標題元素居中對齊。

無論你選擇哪種方法，居中對齊都是一種重要的UI設計技術，可以幫助提高頁面的吸引力和可讀性。