css设置居中的方法:
水平居中
方法一:子元素设置margin: 0 auto;
适用场景:子元素宽度已知
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 200px; height: 200px; border: 1px solid black; } .child_one{ width: 100px; height: 100px; margin: 0 auto; border: 1px solid red; } </style> </head> <body> <div> <div>水平居中</div> </div> </body> </html>
效果如下:
方法二:父元素设置text-align: center; 子元素设置display: inline-block;
适用场景:子元素和父元素的宽度已知或未知都可实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 200px; height: 200px; border: 1px solid black; } .child_one{ width: 100px; height: 100px; margin: 0 auto; border: 1px solid red; } .container_two{ /*width: 200px;*/ height: 200px; text-align: center; border: 1px solid black; } .child_two{ /*width: 100px;*/ height: 100px; display: inline-block; border: 1px solid red; } </style> </head> <body> <div> <div>水平居中</div> </div> <div> <div>垂直居中</div> </div> <!--<div>--> <!--<div>水平垂直居中</div>--> <!--</div>--> </body> </html>
效果如下:
方法三:利用浮动实现。父元素向右相对偏移自身宽度的一半,子元素向左偏移自身宽度的一半。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; border: 1px solid black; } .child_one{ width: 400px; height: 300px; position: relative; left: 50%; border: 1px solid red; } .box{ width: 100px; height: 100px; position: absolute; left: -50px; border: 1px solid green; } </style> </head> <body> <div> <div> <div>水平居中</div> </div> </div> </body> </html>
效果如下:
垂直居中
方法一:通过display:flex实现CSS垂直居中。给父元素设置display:flex;子元素设置align-self:center;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; display: flex; border: 1px solid black; } .child_one{ width: 200px; height: 200px; align-self: center; border: 1px solid red; } </style> </head> <body> <div> <div> 水平居中 </div> </div> </body> </html>
效果如下:
方法二:给父元素添加伪元素:before
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; display: block; border: 1px solid black; } .container_one:before{ content: ''; display: inline-block; vertical-align: middle; height: 100%; } .child_one{ width: 200px; height: 200px; display: inline-block; vertical-align: middle; border: 1px solid red; } </style> </head> <body> <div> <div> 水平居中 </div> </div> </body> </html>
效果如下:
方法三:使用定位实现垂直居中。父元素设置position: relative;子元素设置position: absolute; top: 50%; margin-top: -自身宽度的一半;与父元素的距离为父元素宽度的50%,外上边距为-自身宽度的50%。
适用场景:被居中块级元素的尺寸
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; position: relative; border: 1px solid black; } .child_one{ width: 200px; height: 200px; position: absolute; top: 50%; margin-top: -100px; border: 1px solid red; } </style> </head> <body> <div> <div> 水平居中 </div> </div> </body> </html>
效果如下:
水平垂直居中
方法一:适用定位实现。父元素设置position: relative;子元素设置position: absolute; left: 50%; top: 50%; margin-top: -自身高度的一半; margin-left: -自身宽度的一半;
适用场景:子元素宽高已知
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; position: relative; border: 1px solid black; } .child_one{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; border: 1px solid red; } </style> </head> <body> <div> <div> 水平居中 </div> </div> </body> </html>
效果如下:
方法二:使用定位实现。父元素设置position: relative;子元素设置position: absolute; left:0; right:0; top:0; bottom:0; margin: auto;
思想与方法一一样。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>居中布局</title> <style> .container_one{ width: 500px; height: 400px; position: relative; border: 1px solid black; } .child_one{ width: 100px; height: 100px; position: absolute; left:0; right:0; top:0; bottom:0; margin: auto; border: 1px solid red; } </style> </head> <body> <div> <div></div> </div> </body> </html>
效果如下:
推荐:css参考手册
以上就是css样式怎么设居中?的详细内容,更多请关注0133技术站其它相关文章!