码迷,mamicode.com
首页 > 其他好文 > 详细

前端水平垂直居中的方式(总结):

时间:2021-04-12 12:06:07      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:transform   nbsp   盒模型   image   loading   position   none   span   弹性   

 1.仅水平居中:

1.1行内元素水平居中:text-align

技术图片
 1 <head>
 2   <style>
 3     #box {
 4       width: 200px;
 5       height: 200px;
 6       border: 1px solid red;
 7       /* 行内元素水平 */
 8       text-align: center;
 9     }
10   </style>
11 </head>
12 <body>
13   <div id="box">
14     <span>我要居中</span>
15   </div>
16 </body>
17 </html>
View Code

1.2块级元素水平居中:margin

技术图片
<head>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #box2 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">我是块元素,我想水平居中</div>
  </div>
</body>
</html>
View Code

2.仅垂直居中:

2.1行内元素垂直居中(仅限于单行文本):line-height

技术图片
<head>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
      line-height: 300px;
    }
  </style>
</head>
<body>
  <div id="box1">
    我是子元素
  </div>
</body>
</html>
View Code

3.垂直水平居中:

3.1行内元素:text-align + line-height

技术图片
 1 <head>
 2   <style>
 3     #box1 {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       line-height: 300px;
 8       text-align: center;
 9     }
10   </style>
11 </head>
12 <body>
13   <div id="box1">
14     我是子元素
15   </div>
16 </body>
17 </html>
View Code

效果:技术图片

 3.2.定位+transform

优点:元素宽高改变的时候不要再计算

缺点:有兼容性问题

技术图片
 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       position: relative;
 8     }
 9     .child {
10       width: 100px;
11       height: 100px;
12       background-color: green;
13       position: absolute;
14       left: 50%;
15       top:50%;
16       transform: translate(-50%,-50%);
17     }
18   </style>
19 </head>
20 <body>
21   <div id="parent">
22     <div class="child">子元素</div>
23   </div>
24 </body>
25 </html>
View Code

效果:技术图片

3.3定位+margin

缺点:不够动态,宽高改变需要程序计算

技术图片
 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       position: relative;
 8     }
 9     .child {
10       width: 100px;
11       height: 100px;
12       background-color: green;
13       position: absolute;
14       left: 50%;
15       top:50%;
16       margin-left: -50px;
17       margin-top: -50px;
18     }
19   </style>
20 </head>
21 <body>
22   <div id="parent">
23     <div class="child">子元素</div>
24   </div>
25 </body>
26 </html>
View Code

效果图:技术图片

 3.4弹性盒模型:

技术图片
 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       display: flex; /* 父元素设置flex*/
 8       align-items: center; /* 垂直居中 */
 9       justify-content: center; /* 水平居中 */
10     }
11     .child {
12       width: 100px;
13       height: 100px;
14       background-color: green;
15     }
16   </style>
17 </head>
18 <body>
19   <div id="parent">
20     <div class="child">子元素</div>
21   </div>
22 </body>
23 </html>
View Code

效果:技术图片

3.5.display:table实现(不常用):

技术图片
 1 <head>
 2   <style>
 3     #parent {
 4       width: 300px;
 5       height: 300px;
 6       background-color: red;
 7       display: table;
 8       text-align: center;
 9     }
10     .child {
11       display: table-cell;
12       background-color: green;
13       vertical-align: middle;
14     }
15   </style>
16 </head>
17 <body>
18   <div id="parent">
19     <div class="child">子元素</div>
20   </div>
21 </body>
22 </html>
View Code

效果:技术图片

 

 

 

 

 

 

 

 

 

 

 

 

 

技术图片

 

前端水平垂直居中的方式(总结):

标签:transform   nbsp   盒模型   image   loading   position   none   span   弹性   

原文地址:https://www.cnblogs.com/gxl520/p/14641809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!