css3实现元素水平垂直居中_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3实现元素水平垂直居中_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:05:34

Original

1348 people have browsed it

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"/ alt="css3实现元素水平垂直居中_html/css_WEB-ITnose" >    </div></body></html>

Copy after login