css实现元素水平、垂直居中

废话少说直接上代码咯：

/* 常用的三种方法 */
/* 第一种 */
div{
width: 200px;
height: 200px;
margin: auto;
background: pink;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 第二种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
/* 第三种 */
div{
width: 200px;
height: 200px;
background: green;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

html部分直接去实现去套吧

相关推荐：

CSS控制滚动条样式的解析

CSS3自定义滚动条样式的示例详解

CSS设置div滚动条样式的示例

以上就是css实现元素水平、垂直居中的详细内容，更多请关注Gxl网其它相关文章！