html居中padding,垂直居中对齐 - 使用 padding

实例

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:

代码html>

垂直居中对齐 - 使用 padding

.center {

padding: 50px 0;/*内边距：上下50px，左右0*/

border: 3px solid green;/*边框*/

}

垂直居中

以上实例，我们使用 padding 属性实现元素的垂直居中：

我是垂直居中的。

效果图

小白教程网www.2d5.net

实例:水平和垂直都居中

代码html>

水平和垂直都居中

.center {

padding: 30px 0;/*内边距：上下50px，左右0*/

border: 3px solid green;/*边框*/

text-align: center;/*水平居中*/

}

水平和垂直方向都居中

以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:

我是水平和垂直都居中的。

效果图

小白教程网www.2d5.net