recherche

Maison >interface Web >tutoriel HTML >css3实现元素水平垂直居中_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-21 09:05:341350parcourir


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>


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Hexo博客主题NexT使用自定义的CSS样式_html/css_WEB-ITnoseArticle suivant：css定位_html/css_WEB-ITnose

Articles Liés

Voir plus