水平垂直居中的几个方法

最新推荐文章于 2024-05-17 03:01:40 发布

XINXINXIN_RUI

最新推荐文章于 2024-05-17 03:01:40 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/XINXINXIN_RUI/article/details/80720140

版权

1.元素水平居
定宽块状元素：是通过通过设置“左右margin”值为“auto”来实现居中的来实现

margin: 0 auto;

不定宽状元素：
①.table标签包裹然后设置margin。

<style>
table{magin:10px auto;}
</style>
<body>
  <table>
    <tbody>
      <tr>
        <td>
          <p>水平居中</p>
        </td>
      </tr>
    </tbody>
  </table>

②.利用position:relative向左偏移left:x%（其中xs视具体情况而定）

<style>
p{
  position:relative;
  left:45%
  }\
</style>
<body>
  <div>
    <p>水平居中</p>
  </div>
</body>

③.利用position:relative向左偏移left:x%（其中xs视具体情况而定）

<style>
div{text-aalign:center;}
p{display:inline;}
</style>
<body>
   <div>
     <p>水平居中</p>
   </div>
 </body>

2.水平垂直居中
①表格布局法：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align 属性。

<div id="wrapper">  
    <div id="cell">
        <div class="content">居中</div>
    </div>
</div>  

#wrapper {
    display: table;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

②假借图片法：把一些 div 的显示方式设置为inline-block，和图片一样，因此我们可以使用图片的 vertical-align 属性。

<div id="wrapper">  
    <div id="likeImg">
        <div class="content">居中</div>
    </div>
</div>  

#wrapper {
    display: table;
}

#likeImg {
    display: inline-block;
    vertical-align: center;
}

③绝对定位法：使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。

<div class="box">
    <div id="content"> 居中</div> 
</div> 

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* 盒子本身高度的一半 */
}

④flex布局

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

⑤table-cell布局

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}