在Html5中，實現上下居中的效果有多種方法，下面我們就來介紹一些常見的方法：

/*Method 1： 使用flex布局*/
.container { 
display: flex;
align-items: center; /*設置垂直居中*/
justify-content: center; /*設置水平居中*/
}
/*Method 2： 使用transform*/
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Method 3： 使用table-cell*/
.container {
display: table-cell;
vertical-align: middle; /*設置垂直居中*/
text-align: center; /*設置水平居中*/
}

以上是實現上下居中的三種常見方法，可以根據自己的需求進行選擇。需要注意的是，如果想要實現相對于外層父元素的上下居中，外層父元素需要設置height屬性，以便內部元素可以相對父元素進行位置調整。