css网页如何居中显示 |css3获取最后一个元素

在网页设计中，居中显示是非常常见的需求，其中CSS提供了多种方法实现网页内容的居中显示。下面大家来学习如何实现CSS网页的居中显示。 一、水平居中 1.行内元素的水平居中 对于行内元素的水平居中，大家可以使用text-align属性，将其设置为center即可。 例如：

p{
text-align:center;
}

2.块级元素的水平居中 对于块级元素的水平居中，大家可以使用margin属性，将左右外边距设置为auto，这样元素就会自动居中显示。 例如：

div{
margin:0 auto;
}

二、垂直居中 1.单行文本的垂直居中 对于单行文本，大家可以将其line-height属性和height属性设置为相等的数值，这样就可以实现单行文本的垂直居中。 例如：

p{
height:50px;
line-height:50px;
text-align:center;
}

2.多行文本的垂直居中 对于多行文本的垂直居中，大家可以使用flex布局或者position属性实现。 flex布局：

.container{
display:flex;
align-items:center;
}
p{
margin:auto;
}

position属性： 首先需要将父元素设置为position:relative，然后将子元素设置为position:absolute，同时将top和left属性设置为50%，然后再将margin-top和margin-left属性设置为元素高度和宽度的一半即可。 例如：

.container{
position:relative;
}
p{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
}

以上就是关于CSS网页如何居中显示的介绍，希望对大家有所帮助。