欢迎光临
我的个人博客网站

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


 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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端水平垂直居中的方式(总结):
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏