HTML界面居中代碼 在網頁設計中，經常需要進行頁面居中處理，這可以讓網頁看起來更具有美感和規整感。下面是一些HTML界面居中代碼，希望對您有所幫助。 一、水平居中 1.使用margin屬性 將要居中的元素使用margin屬性，設置左右的margin值為“auto”，就可以實現水平居中，代碼如下：

p{
width:300px;
margin:0 auto;
}

該代碼表示將p元素的寬度設置為300px，并設置左右margin為auto，即可實現水平居中效果。 2.使用text-align屬性 將要居中的容器元素使用text-align屬性，將其值設置為“center”，即可實現其中的子元素水平居中，代碼如下：

div{
text-align:center;
}
p{
display:inline-block;
}

該代碼表示將div元素的text-align屬性設置為center，將其中的p元素設置為inline-block屬性，即可實現p元素的水平居中。 二、垂直居中 1.使用line-height屬性 將容器元素的高度設置為等于行高，可以通過設置行高來實現垂直居中效果，代碼如下：

div{
height:100px;
line-height:100px;
text-align:center;
}
p{
display:inline-block;
vertical-align:middle;
}

該代碼表示將div元素的高度設置為100px，設置行高與高度相等，將其中的p元素設置為inline-block屬性，并設置其vertical-align屬性為middle，即可實現p元素在div元素中垂直居中。 2.使用position和transform屬性 將要居中的元素使用position屬性，將其值設置為absolute，然后在父元素中使用position屬性，將其值設置為relative，最后使用transform屬性，將元素向上移動50%的高度就可以實現垂直居中效果，代碼如下：

div{
position:relative;
border:1px solid #333;
height:200px;
width:200px;
}
p{
position:absolute;
top:50%;
transform:translateY(-50%);
}

該代碼表示將div元素使用position屬性，并將其值設置為relative，將p元素使用position屬性，并將其值設置為absolute，然后使用transform屬性將其向上移動50%的高度，就可以實現p元素在div元素中垂直居中。 總結 以上是一些HTML界面居中的代碼，可以通過調整margin、text-align、line-height、position和transform等屬性來實現不同的居中效果，希望對您有所幫助。