阅读模式:

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

阅读量:15  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:1.仅水平居中:1.1行内元素水平居中:text-align 1 <head> 2 <style> 3 #box { 4 width: 200px; 5 ......

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

 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

效果:

分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: