<!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来居中,这样...