admin管理员组文章数量:1794759
CSS 水平居中
1.若元素内容为文字时，元素设置text-align:center (text-align属性指定元素文本的水平对齐方式。center：把文本排列到中间。)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> p { text-align:center; background:red } </style> </head> <body> <p>这里是文本内容</p> </body> </html>2.父子元素宽度固定，父元素设置text-align:center ，子元素设置display：inline-block,并且子元素不能设置浮动，否则居中失效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .outer{ width:200px; height:150px; text-align:center; background:red } .inner { width:150px; height:40px; background:green; display:inline-block } </style> </head> <body> <div class="outer"> <div class="inner">这里是子元素</div> </div> </body> </html>3.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置 浮动，否则居中失效
水平居中原理：子元素若不设置宽度，则宽度将会覆盖父元素，margin：auto平分两侧空间
<style> .outer{ background:red; width:150px; height:150px; } .inner { background:green; width:120px; height:120px; margin:auto } </style> </head> <body> <div class="outer"> <div class="inner">这里是子元素</div> </div> </body>4.子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin：auto
居中原理：margin：auto平分两侧空间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .outer{ background:red; width:200px; height:200px; position:relative; } .inner { position:absolute; background:green; width:150px; height:150px; top:0; right:0; bottom:0; left:0; margin:auto; } </style> </head> <body> <div class="outer"> <div class="inner">这里是子元素</div> </div> </body> </html> 5.子元素相对定位，子元素 top，left 值为 50%，transform:translate(-50%,-50%);
居中原理：top/left：50%即子元素的上/左外边距边界与其包含块（即父元素）上/左边界之间偏移50%（如果 "position" 属性的值为 "static"，那么设置 "top/left" 属性不会产生任何效果。），此刻子元素左上角位于以父元素左上角为原点的中心位置，translate(-50%,-50%)让子元素向左上移动自身宽高的50%，此时子元素相对父元素水平垂直居中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .outer{ background:red; width:200px; height:200px; position:relative; } .inner { position:absolute; background:green; width:100px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div class="outer"> <div class="inner">这里是子元素3</div> </div> </body> </html> 6.父元素设置 display：table-cell vertical-align：middle，子元素设置 margin：auto
<style> .outer{ background:red; width:150px; height:150px; display:table-cell; vertical-align:middle } .inner { background:green; width:120px; height:120px; margin:auto } </style> </head> <body> <div class="outer"> <div class="inner">这里是子元素</div> </div> </body>7.margin：0 auto；+text-align: center;（父元素需要设置宽、高）
Ps:margin：0 auto；上下外边距为0px，左右外边距由浏览器计算（左右一样宽）。text-align属性指定元素文本的水平对齐方式，center：把文本排列到中间。
版权声明：本文标题：CSS 水平居中 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973909a124244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论