CSS 元素居中

CSS - 块元素居中

块元素水平居中 :

div { margin: 0 auto; }

块元素水平、垂直居中 :

1.jpg

图1

查看图1代码

CSS - 内联元素居中

内联元素水平居中需要给其父元素设置 :

div{
	text-align: center;
}

内联元素垂直居中需要给其父元素设置 高(height)= 行高(line-height) :

div{
	height: 100px;
	line-height: 100px;
}

2.jpg

图2

查看图2代码

CSS - 文本居中

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

<p>pangugle 教程</p>

文本水平居中:text-align: center;
文本垂直居中:高(height)= 行高(line-height)

在实际场景中,经常使用 padding 来进行微调垂直居中。如:

div{
	width: 400px;
	border: 1px solid #5F9EA0;
	padding: 20px 0;
}

<div><p>pangugle 教程</p></div>