如何让div水平居中以及垂直居中，在宽高不定的情况下
点评：从事页面重构以来，由于经常遇见宽度不固定的div在水平或垂直居中的问题！总结下！留着以后用宽度高度不固定div的水平居中演示如下：水平居中代码：html部分
123
css部分.container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
.center{display:inline-block;border:2px solid #fff;}
.center{_display:inline;} /*针对ie6 hack*/
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
代码要点：父容器container加css属性 text-align:center;
子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack宽度高度不固定的div垂直居中演示如下：垂直居中代码：html部分
我们垂直居中了，我们水平居中了
css部分#vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; }
#vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
#content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }
代码要点：父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的话，需要注释掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;宽度高度固定的div垂直居中和水平居中html部分居中了css部分.guding{width:500px;height:200px;background:#c2300b;margin-left:50px;position:relative;}
.gd{width:50px;height:20px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-25px;}代码要点父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位，top:50%;left:50%;margin-top，margin-left的值取该容器高度，宽度的一半的负值。如果相对于浏览器窗口做水平垂直居中的话，比如需要大背景居中，代码如下
.main{background:url(你的背景图片地址) no-repeat;width:1000px;height:800px;position:absolute;margin-top:-400px;margin-left:-500px;}
<style
type="text/css">
<!--
div
{
position:absolute;
top:50%;
left:50%;
margin:-150px
0
0
-200px;
width:400px;
height:300px;
border:1px
solid
#008800;
}
-->
让层垂直居中于浏览器窗口
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。
你宽高都不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；
解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中
不固定宽度的CSS不能实现，只能通过调用脚本读取div当前的宽度高度再赋值，方法还是跟上面的一样。
垂直居中你最好用JS写 水平居中margin:0 auto
答：第一种方式 - 绝对定位：<template> <div id="app"> <div class="div1"></div> </template> css部分：app { position: relative;width: 100vw;height: 100vh;} .div1 { position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 150px;height: 150px;background...
答：方法三：div使用绝对定位position：absolute，并且设置left和top的值都为50%。使用css3的transform属性。transform：translate（-50%，-50%）。以上3种方法的效果如下显示 若有两个div，里面小的div相对于外面大的div水平垂直居中对齐，有以下几种方法。方法一：利用position和margin：auto实现。父元素设置...
答：4.display: table-cell 由于单元格可以轻易的实现水平和垂直居中，所以可以把父元素容器模拟成单元格元素，通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。 #table{ display: table-cell; width: 20...
答：div中的文字水平居中：text-align:center；即可。div中的文字垂直居中：line-height:值。值等于div的高度。示例：<html><body><div style="width:200px;height:100px;border:1px solid red;text-align:center;line-height:100px;">居中对齐</div></body></html>。
答：margin-left:-200px; margin-top:-100px; border:1px solid #00F } </style> <body> <div id="main">DIV水平居中和上下垂直居中</div> </body> </html> 这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置mar...
答：您好，水平居中有很多种方法 使用margin:0 auto；前提是div为盒子并且有宽高。然后手动调节高度，可以是50%-height/2。使用绝对定位：left:0;right:0;top:0;bottom:0;margin:auto;使用绝对定位：根据自己的需要手动调节位置。可以调至top:50%-h/2;left:50%-w/2；还可以使用弹性盒模型。父级：...
答：有以下三种方法：1、设置div的height和line-height值设置为相同的数值，只需要一个div即可。2、设置父级div样式的display:table，并设置子div样式的display:table-cell、vertical-align:middle，此时需要一个父级div和一个子级div。3、设置父级div样式为display:box、box-pack:center、box-orient:vertical...
答：一般都是用padding-top 或margin-top
答：CSS网页布局DIV水平居中的各种方法 一、单行垂直居中 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：imoker.cn（爱摩客）提供的代码片段：div { height:25px;line-height:25px;overflow:hidden;} ...
答：text-align:center; /*水平居中*/line-height: 20px; /*行距设为与div高度一致*/示例如下：HTML元素 <div>水平垂直居中</div>css样式 div{width:200px;height:200px; /*设置div的大小*/border:1px solid green; /*边框*/text-align: center; /*文字水平居中对齐*/line-height: 200...
