<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不定宽高进行垂直水平居中</title>
<style type="text/css">
#demo{
position: absolute;
left: 50%;
top:50%;
width: 500px;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background: #123455;
color: #fff;
}
</style>
</head>
<body>
<div id="demo">
<p>水平垂直居中的随意内容</p>
</div>
</body>
</html>
基于css3 效果:
css2：
水平居中一般采用两种方式:
1.块级元素：定宽 + margin:0 auto;（由于是不定宽高，所以这里不适用）；
2.行内元素：利用父级元素 text-algin：center；（可以内联化，视情况而定）
垂直方向居中:
采用display:table-cell;vertical-algin:middle;
如:
<style type="text/css">
#container{
display: table;
text-align: center;
height: 400px;
width: 500px;
border: 1px solid #ccc;
}
#inner{
display: table-cell;
vertical-align: middle;
}
</style>
<div id="container">
<span id="inner">
<img src="img/prdct.jpg">
</span>
</div>
效果:
相关推荐
不定宽高元素的垂直和水平居中，兼容IE67
本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？ 现在来总结一下： 在body中写入结构 <div id=main> <div id=login> djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ...
通用所有浏览器， 谢谢详细信息详细信息详细信息
主要介绍了在不定宽高的情况下，div内图片如何垂直居中，css样式如何书写？示例代码如下
一个DIV绝对居中的例子，希望能帮你解决一些垂直居中的问题（包括不定高度的DIV）。。。
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少。不过最近有人问了几个例子。...
1、怎么让一个不定宽高的 DIV，垂直水平居中 2、position 几个属性的作用 4、什么是 BFC 5、CSS 引入的方式有哪些 6、描述 css res
1、怎么让一个不定宽高的 DIV，垂直水平居中 2、position 几个属性的作用 4、 什么是 BFC 5、CSS 引入的方式有哪些 6、描述 css re
1.怎么让一个不定宽高的 DIV，垂直水平居中 3.浮动与清除浮动3.1 浮动相关知识float属性的取值：left：元素向左浮动 7. CSS 引入的方式有哪
本篇文章讨论居中情况设定为总宽度不定,内容宽度不定的情况。（改变大小时，仍然居中）。 特别说明：在元素设置position:absolute;来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样...