Heim > Artikel > Web-Frontend > 网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中_html/css_WEB-ITnose
网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:351423Durchsuche
flex实现子块的完美居中
方案
父块使用display:flex属性,子块margin自适应即可实现
代码
index.html
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>块状元素垂直居中(已知高度)</title> <style> *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“auto”，可以使伸缩项目在伸缩容器的两上轴方向都完全集中。 */ </style></head><body> <div class="parent"> <div class="child">ff</div> </div></body></html> 未知宽高元素实现水平垂直居中 方案
使用transform:translate属性来调整
代码
index.html
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>块状元素水平垂直居中(未知宽高)</title> <style> *{margin: 0;padding: 0;} /*简易版reset,工作环境不推荐使用*/ #container{ position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background-color: #A4FF00; color:rgb(33, 172, 134); } /*因为不知道宽高度,所以主要用translate属性拉回未知元素XY轴上的位置实现居中*/ /*若是单纯实现未知高度的元素居中,只要用到transform:translateY(-50%)即可实现*/ </style></head><body> <div id="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae obcaecati expedita ducimus, rem laborum veniam qui quo facilis enim. Repellat blanditiis nemo, magnam, sequi illum perferendis consequatur modi maiores quaerat?</div></body></html> flex实现页面水平垂直居中 方案
定义居中元素的父元素justify-content和align-items属性为center即可,需要设置足够的高度,不然只有水平居中效果
代码实现
index.html
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>flex实现子块的完美居中</title> <style> * { margin: 0; padding: 0; } .parent { display: flex; justify-content: center; align-items: center; height:900px; background: #03A1FA; } .child { width: 100px; height: 100px; background: #BB3713; } </style> </head> <body> <div class="parent"> <div class="child">啦啦德玛新亚</div> </div> </body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ul中的li如何居中均匀分布呢_html/css_WEB-ITnoseNächster Artikel：超酷的CSS3网页加载效果_html/css_WEB-ITnose