css实现div水平垂直居中

最新推荐文章于 2023-10-11 15:04:07 发布

dielimin4389

最新推荐文章于 2023-10-11 15:04:07 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/yyzhiqiu/p/11497511.html

版权

　　中秋快到了，祝大家中秋快乐。

　　平时大家写bug过程中肯定会遇到让div框水平或者垂直居中，然而有时候能居中，有时候不能居中。我把平时遇到的一些方法写出来，如果对你有用，那便是晴天。

　　1、text-align: center;

text-align: center;

　　这个是最简单的了，实现文本水平居中。

　　2、margin： 0 auto;

　　0为上下边距为0，auto为左右边距自适应，于是变实现了水平居中。高度固定时，加上line-height就能实现垂直居中。代码如下：

1 margin: 0 auto;
2 height: 100px;
3 line-height: 100px;<!-- 高度固定时使用 -->

　　3、子元素基于父元素实现居中

　　采用绝对定位，使子div框定位跟着父div框，再让子div框左右边距自适应，于是边形成了水平垂直居中。

　　效果如图1所示。

图1

　　代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8   <style>
 9     .parent {
10       width: 200px;
11       height: 200px;
12       border: 1px red solid;
13       margin:0 auto;
14       position: relative
15     }
16     .child {
17       width: 100px;
18       height: 100px;
19       border: 1px red solid;
20       position:absolute;
21       left: 0;
22       right: 0;
23       top:0;
24       bottom:0;
25       margin-left: auto;
26       margin-right: auto;
27       margin-top:auto;
28       margin-bottom:auto;
29     }
30   </style>
31 </head>
32 <body>
33   <div class="parent">
34     <div class="child">
35     </div>
36   </div>
37 </body>
38 </html>

　　4、弹性盒子实现居中

1 display: flex;
2 align-items: center; /*定义父元素的元素垂直居中*/
3 justify-content: center; /*定义子元素的里的元素水平居中*/

　　还有使用absolute与transform配合实现居中的，看小伙伴自己选择了。

　　本文到这里就结束了，中秋快乐，有缘再会。

转载于:https://www.cnblogs.com/yyzhiqiu/p/11497511.html

dielimin4389

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现div水平垂直居中

　　中秋快到了，祝大家中秋快乐。　　平时大家写bug过程中肯定会遇到让div框水平或者垂直居中，然而有时候能居中，有时候不能居中。我把平时遇到的一些方法写出来，如果对你有用，那便是晴天。　　1、text-align: center;text-align: center;　　这个是最简单的了，实现文本水平居中。　　2、margin： 0 auto;　　0为上...
复制链接

扫一扫