css3实现元素水平垂直居中

css3实现元素水平垂直居中,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
    width:100%;
    height:100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    -o-box-align: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.main{
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px auto;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    -o-box-align: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center; 
}
.main img{
    width:70%;
    height: 70%;
}
</style>
</head>

<body>
    <div class="main">
	<img src="login-bg.jpg"/>
    </div>
</body>
</html>
时间: 2024-11-08 20:20:41

css3实现元素水平垂直居中的相关文章

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中

flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;} .

未知宽高的元素水平垂直居中方法总结

1.父元素设置display:table;子元素设置display:table-cell; 缺点:IE7不支持,而且子元素会填满父元素,不建议使用 2.使用css3 transform:translate(-50%; -50%) 缺点:兼容性不好,IE9+ 3.使用flex布局 缺点:兼容性不好,IE9+ 4.利用伪类元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&

关于元素水平垂直居中的那些事?

关于元素水平垂直居中的那些事? 中国式的美,总是少不了对称美的存在.对称美,存在于建筑之上,也巧秀于美食之中.对称之美,中国之风!美,用户体验的一种,作为用户体验的打造者,我们是不是也应该知道些有关于前端开发中的对称美呢?那我们大前端中到底存在些什么对称美呢?ok,那我们今天就来聊聊,关于元素水平垂直居中的那些事吧! 什么是元素水平垂直居中? 什么是元素水平垂直居中?想必大家看到这问题,心里早已经有数了!水平则为左右,垂直即为上下,居中亦为中心.也就是说,我们在使用元素的时候,有可能要水平居中,

CSS未知宽高元素水平垂直居中

方法一 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(parent)可以动态的改变高度(table元素的特性)缺点:IE8以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中&l

CSS元素水平垂直居中方法总结(方法主要来自大漠以及张鑫旭博客)

以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g

总结:前端开发中让元素水平垂直居中的方法

前端开发中,我们经常需要对元素进行水平垂直居中.为此,小编特地总结了让元素居中的方法. 水平居中text-align:center; 这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可.如果要居中的块级元素直接是内联元素(span.img.a等),直接在其父级元素上加上属性text-align:center;即可: .way { border: 1px solid red; width:

css 实现元素水平垂直居中总结5中方法

个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 1 <div id="divAuto">margin,text-align;水平居中</div> 1 /* 2 margin:0 auto; 设置块元素(或与之类似的元素)的水平居中 3 text-align:center;设置文本或img标签等一些内联对象(或与之类似的元素)的水平居中 4 line-hei

使元素相对于窗口或父元素水平垂直居中的几种方法

如果一个元素具有固定或相对大小,要使其不管如何调整窗口大小或滚动页面,始终位于浏览器窗口中间,可使用如下方法: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><meta charset="utf-8&q