上下左右居中模块(上下左右垂直居中)

Posted zyg2014

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上下左右居中模块(上下左右垂直居中)相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下左右居中模块</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
}
.lanren{
position: fixed;
left: 50%;
top: 50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.square{
width: 114px; 
height: 114px; 
border: 5px solid white; 
box-sizing: border-box; 
background-color: red;
}
</style>
</head>
<body>
<div class="lanren">
<div class="square"></div>
</div>
</body>
</html>

效果

 

以上是关于上下左右居中模块(上下左右垂直居中)的主要内容,如果未能解决你的问题,请参考以下文章

怎么让文字上下居中

让一个div水平且垂直居中

web前端技巧-文本如何垂直居中?多行文本如何实现上下居中?

CSS 代码如何在一个div内让文字垂直居中

python测试开发django-156.bootbox 垂直居中(上下居中)

CSS实现DIV水平居中和上下垂直居中