CSS实现水平垂直居中

最新推荐文章于 2024-03-26 17:58:00 发布

渡梵尘

最新推荐文章于 2024-03-26 17:58:00 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/lx_dfc/article/details/83340441

版权

如何用CSS实现盒子的水平垂直居中在实际工作和面试中都常有出现，在此做一次总结：

1.定位，父相对，子绝对，返回自身宽高的一般。需要知道子元素的宽高

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    position: relative;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}
</style>
<body>
   <div class="box">
     <div class="bg"></div>
   </div> 
</body>

2.子相对，用transform: translate(-50%,-50%)

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
</style>
<body>
   <div class="box">
     <div class="bg"></div>
   </div> 
</body>

3.定位，父相对，子绝对，margin: auto;

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    position:relative;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
</style>
<body>
   <div class="box">
     <div class="bg"></div>
   </div> 
</body>

4.定位，父相对，子绝对，用css3 的计算属性 calc.

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    position:relative;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}
</style>
<body>
   <div class="box">
     <div class="bg"></div>
   </div> 
</body>

5.利用行内元素居中属性也可以做到水平垂直居中 display: inline-block; vertical-align: middle;

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    text-align: center;
    line-height: 600px;

}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    line-height: initial; /* 修正文字 */
}
</style>
<body>
   <div class="box">
     <div class="bg">我如果爱你，不仅爱你伟岸的身躯，也爱你坚持的位置，足下的土地。</div>
   </div> 
</body>

6.writing-mode: vertical-lr;属性的特殊性

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    text-align: center;
    writing-mode: vertical-lr;
}
.box-bg{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    display: inline-block;
    margin: auto;
}
</style>
<body>
   <div class="box">
    <div class="box-bg">
     <div class="bg">我如果爱你，不仅爱你伟岸的身躯，也爱你坚持的位置，足下的土地。</div>
    </div> 
   </div>
</body>

7.display: table-cell;

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
    display: inline-block;
}
</style>
<body>
   <div class="box">
     <div class="bg">我如果爱你，不仅爱你伟岸的身躯，也爱你坚持的位置，足下的土地。</div>
   </div>
</body>

8.flex布局实现居中

<style>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 600px;
    height: 600px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg{
    width: 300px;
    height: 300px;
    border: 1px solid red;  
    background-color: #fff;
}
</style>
<body>
   <div class="box">
     <div class="bg">我如果爱你，不仅爱你伟岸的身躯，也爱你坚持的位置，足下的土地。</div>
   </div>
</body>