CSS3 水平居中和垂直居中方式整合

时间：2018-12-21 17:38:08 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：direct size 技术分享 enter 17. rap otto font span

实现居中的方式分为水平和垂直，接下来对两种方式进行整体的整合

水平居中

水平居中需要满足两个条件：父级元素为块级元素且设置宽度

1.子元素为任意元素，但未设置宽度

<body>
    <div class="wrap">
          <p class="center">快把我变居中<p/>
    </div>            
</body>

.wrap{
     width:300px;
     height:300px;      
     background:gray;
}

.center{
      text-align:center;    
}

效果如下图：

技术分享图片

2.子元素为任意元素，并设定了宽度

margin

<body>
    <div class="wrap">
          <p class="center">margin<p/>
    </div>            
</body>

.wrap{
     width:300px;
     height:300px;
     background:gray; 
}

.center{
     margin:0 auto; 
　　　width:100px;
   
}

效果图如下：

技术分享图片

padding-left和padding-right

我们还可以通过计算父元素和子元素宽度之差，（父宽-子宽）/2，得出父元素的padding-left或者padding-right

<div class="wrap">
    <div class="center">快把我变居中</div>
</div>
</body>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
    padding-left: 100px;
}

.center{
    color: beige;
    box-sizing: border-box;
    width: 100px;
}

效果如图:

技术分享图片

计算子元素的margin-left或margin-right

计算子元素的方式和计算父元素的方式相同

<div class="wrap">
    <div class="center">margin-left</div>
</div>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
}

.center{
    color: beige;
    box-sizing: border-box;
    width: 100px;
    margin-left: 100px;
}

效果如图：

技术分享图片

使用定位

<div class="wrap">
    <div class="center">margin-left</div>
</div>

.wrap{
    width:300px;
    height:300px;
    background: gray;
    box-sizing: border-box;
    position: relative;
}

.center{
    color: beige;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
}

效果如图：

技术分享图片

flex

<body>
<div class="wrap">
    <div class="center">flex</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;

}

垂直居中

1.子元素为块级元素，宽高设定了

计算父元素的padding-top或padding-bottom

<body>
<div class="wrap">
    <div class="center">margin-top</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding-top: 100px;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;
}

效果如图：

技术分享图片

计算子元素的margin-top或margin-bottom

<body>
<div class="wrap">
    <div class="center">position</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    margin-top: 100px;
    color: #fff;
}

技术分享图片

定位

<body>
<div class="wrap">
    <div class="center">padding-top</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    position: relative;
}

.center{
    position: absolute;
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;
    top: 50%;
    margin-top: -50px;
}

效果如图：

技术分享图片

flex

<body>
<div class="wrap">
    <div class="center">position</div>
</div>
</body>

.wrap{
    width:200px ;
    height: 300px;
    border: 2px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.center{
    width:100px ;
    height: 100px;
    box-sizing: border-box;
    background: #6495ed;
    color: #fff;

}

效果如图：

技术分享图片

CSS3 水平居中和垂直居中方式整合

标签：direct size 技术分享 enter 17. rap otto font span

原文地址：https://www.cnblogs.com/xx929/p/10156927.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行