css实现上下左右居中显示,CSS实现一个标签上下左右居中的办法

方法一：通过display：table布局

代码如下：

上下左右居中

body {

height: 100%;

width: 100%;

overflow: hidden;

}

.container {

display: table;

width: 100%;

height: 100%;

overflow: hidden;

position: absolute;

left: 0;

top: 0;

}

.container-inner {

margin: 0 auto;

height: 100%;

display: table-cell;

vertical-align: middle;

}

.container-content {

width: 60%;

margin: 0 auto;

}

p {

text-align: center;

}

这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容

这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容

这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容