<div>和<body>都是HTML中的標簽，用于構建網頁的布局結構。常見的網頁布局中，通常希望將頁面內容居中顯示，使其更加美觀和易讀。本文將通過幾個代碼案例，詳細解釋如何使用CSS和JavaScript實現<div>和<body>的居中效果。
案例一：使用CSS實現<div>居中
<style>
.center-div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
</style>
<br>
<div class="center-div">
這是一個居中顯示的div。
</div>在上述代碼中，我們通過CSS的flex布局屬性實現了<div>元素的居中。通過設置display屬性為flex，我們創建了一個彈性容器（flex container）。justify-content:center指定了其子元素的水平居中對齊方式，align-items:center則指定了其子元素的垂直居中對齊方式。設置width:100%和height:100%將<div>元素的寬度和高度都設置為與父元素相等，從而實現了完整的居中效果。
案例二：使用JavaScript實現<body>居中
<script>
window.onload = function() {
var body = document.getElementsByTagName('body')[0];
body.style.display = 'flex';
body.style.justifyContent = 'center';
body.style.alignItems = 'center';
};
</script>
<br>
<body>
頁面內容
</body>在上述代碼中，我們通過JavaScript設置了<body>元素的樣式來實現居中效果。在window.onload事件中，我們獲取到<body>元素，并將其display屬性設置為flex。然后通過設置justifyContent和alignItems屬性為center，實現了<body>元素的子元素在水平和垂直方向上的居中對齊。這樣，頁面中的內容就會居中顯示。
綜上所述，我們可以通過CSS和JavaScript來實現<div>和<body>元素的居中效果。通過設置相應的布局屬性和樣式，我們可以輕松實現網頁中內容的居中顯示，提升用戶的瀏覽體驗。