当前位置：Gxlcms > css > css垂直居中的整理总结

css垂直居中的整理总结

时间：2021-07-01 10:21:17 帮助过：84人阅读

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

垂直居中用到的地方有很多，解决的方法也有很多。

已知元素宽度 可以用position定位 + margin负值的方法

绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中；如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多
绝对定位 + 左50% + margin左：宽度一半的负值 可以做到水平居中 右也可以
绝对定位 + 上50% + margin上：高度一半的负值 可以做到垂直居中 底部也可以

css垂直居中的整理总结


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;
  8.                 margin: 0;
  9.             }
  10.             .wrapper{
  11.                 width: 500px;
  12.                 height: 500px;
  13.                 background: #f90;
  14.                 left: 0;
  15.                 right: 0;
  16.                 top: 0;
  17.                 bottom: 0;
  18.                 position: absolute;
  19.                 margin: auto;
  20.                 /*绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中*/
  21.                 /*如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多*/
  22.             }
  23.             .content{
  24.                 width: 100px;
  25.                 height: 200px;
  26.                 background: #0f8;
  27.                 position: absolute;
  28.                 /*position: absolute基于第一个不是position：static的父级元素定位*/
  29.                 left: 50%;
  30.                 top: 50%;
  31.                 margin-left: -50px;
  32.                 margin-top: -100px;
  33.                 /*绝对定位 + 左50% + margin左：宽度一半的负值 可以做到水平居中  右也可以*/
  34.                 /*绝对定位 + 上50% + margin上：高度一半的负值 可以做到垂直居中  底部也可以*/
  35.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <p class="wrapper">
  40.             <span class="content"></span>
  41.         </p>
  42.     </body></html>


View Code

未知元素宽度 可以用position定位 + transform:translate（x，y）移动
绝对定位 + 上50% + 下50% + transform:translate（-50%，-50%） 可以做到垂直居中


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;
  8.                 margin: 0;
  9.             }
  10.             .wrapper{
  11.                 width: 500px;
  12.                 height: 500px;
  13.                 background: #f90;
  14.                 left: 0;
  15.                 right: 0;
  16.                 top: 0;
  17.                 bottom: 0;
  18.                 position: absolute;
  19.                 margin: auto;
  20.                 /*绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中*/
  21.                 /*如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多*/
  22.             }
  23.             .content{
  24.                 width: 100px;
  25.                 height: 200px;
  26.                 background: #0f8;
  27.                 position: absolute;
  28.                 /*position: absolute基于第一个不是position：static的父级元素定位*/
  29.                 left: 50%;
  30.                 top: 50%;
  31.                 transform: translate(-50%,-50%);
  32.                 /*transform变化、使...变形、转换；transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动，旋转，缩放，倾斜*/
  33.                 /*translate平移,是transform的属性值的一部分*/
  34.                 /*transition过渡、转变；可多个样式的变换效果*/
  35.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <p class="wrapper">
  40.             <span class="content"></span>
  41.         </p>
  42.     </body></html>



p中img图片垂直居中：

可以用vertical-align:middle，但是这个属性只有在inline-block类型（inline也有影响)的元素身上起作用，vertical-align的理解我得继续学习下，也欢迎大家指正

css垂直居中的整理总结
方法一：图片vertical-align:middle + 父元素的height与line-height一致


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;margin: 0;
  8.             }
  9.             .wrapper{
  10.                 height: 300px;
  11.                 line-height: 300px;
  12.                 width: 300px;
  13.                 margin:100px auto;
  14.                 background: #f90;
  15.                 text-align: center;
  16.             }
  17.             .wrapper img{
  18.                 width: 150px;
  19.                 vertical-align: middle;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <p class="wrapper">
  25.             <img src="images/1.jpg" alt="美女" title="美女"/>
  26.         </p>
  27.     </body></html>


View Code

方法二：父元素设置display：table-cell和vertical-align


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;margin: 0;
  8.             }
  9.             .wrapper{
  10.                 width: 300px;
  11.                 height: 300px;
  12.                 background: #f90;
  13.                 text-align: center;
  14.                 vertical-align: middle;
  15.                 display: table-cell;
  16.             }
  17.             .wrapper img{
  18.                 width: 150px;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <p class="wrapper">
  24.             <img src="images/1.jpg" alt="美女" title="美女"/>
  25.         </p>
  26.     </body></html>

更多css垂直居中的整理总结相关文章请关注PHP中文网！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！