上下左右居中模块（上下左右垂直居中）

<!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>

效果

时间： 2024-11-07 08:50:08

上下左右居中模块（上下左右垂直居中）的相关文章

css居中-水平居中,垂直居中,上下左右居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述. 水平居中 <div class="container"> <div class="item">居中</div> </div> 1.text-align: center; 对父元素设置text-align: center;子元素即可居中.但子元素是有限制的,只对图片,文字等行内元素有效. 如果子元素有一定宽度,可以设置子元素display:i

css：子元素div 上下左右居中方法总结

最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 备注:此处小编使用position:fixed为最佳方案,因为position:fix

上下左右居中的方法总结

居中的方法有很多,比较难的是选择合适的方法. 今天搜了一下,总结一下各种居中方法的优缺点. 演示效果 方法一 使用flexbox伸缩盒布局 优点: 简单,可能以后会成为主流 缺点: 兼容性差 查看这里 ##方法二 把包裹的父容器显示方式改成table,子元素改成table-cell,然后table-cell里面的元素就可以使用vertical-align 属性.(当然不只是table-cell,vertical-align适用于 inline level, inline-block level

元素div 上下左右居中方法总结

情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 情景二:一个父元素div,一个已知宽度.高度的子元素div(200*300) 解决方案: 1.position布局 { position:absolute/fixed; top:50%; left:50%; margin-left:-100px; margin-top:-150px;}

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>div块上下左右居中</title> </head> <body>     <div id="div2">     </div>     <style>     *{p

固定容器里图片上下左右居中显示学习

最近做个小项目,要做图片的上下左右居中.从网上找了找,看了些css代码.自己写写,学习一下! 1.左右居中的话,比较简单.父元素a,子元素b. a里面加(text-align:center),b里面加(display:inline-block),就好了. 理论嘛,应该是text-align用于行内元素,特别是对文字居中而言.而inline-block元素具有了inline的一些特性.so... 2.上下居中比较麻烦,但是都离不开(vertical-align:middle),这个属性.但是这玩意

css div上下左右居中

相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝"f"><div class="content"></div></div> <style> .f{ width: 800px; height: 800px; position:relative; } .content

div元素上下左右居中

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>div元素上下左右居中</title> 6 <style type=

html css 图片居中(水平居中和垂直居中)，移动端图片预览

做网站的时候,经常会遇到因图片宽高比率不一致导致图片显示方式有问题. 1.在图片宽高未知的情况下,图片上下左右居中   我以前的博客文章有写过,就不再重复了.博客地址,效果预览地址(欢迎copy) 上面的虽然没问题,但是在图片列表里,图片上下左右不对齐,造成图片列表排版很难看,产品要求宽高定死,也就是下面的第二种方法. 2.在图片宽高未知的情况下,img标签 宽高固定显示(图片会变形) 效果预览地址(欢迎copy) 因为第二种方法,宽高定死,导致图片变形了,反而不美. 产品说:我要图片不失真,又