当前位置： 移动技术网 > IT编程>网页制作>CSS > css样式水平居中和垂直居中的方法

css样式水平居中和垂直居中的方法

2019年09月23日  | 移动技术网IT编程  | 我要评论

新包青天打龙袍,海狮坠饰,大王蛇图片

水平居中（包含块中居中）

1. 定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]）

例子：在box1盒子上设置宽，再设置margin：auto；

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        margin: auto;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

得到的效果：

 

 

 

2. 弹性盒设置justify-content: center，让弹性项目在主轴上居中。（普遍适应）

例子：在其父元素上设置弹性盒子，和对齐方式；

<style>
    .box-all {
        display: flex;
        justify-content: center;
    }
    
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

得到的效果：

3. 父元素设置text-align: center，让其内部的行盒、块盒居中（文本）。

例子：在盒子上设置text-align:center；文本自动居中；

<style>
    p {
        text-align: center;
    }
</style>

<body>
    <div class="box-all">
        <p>这是一段文本。</p>
    </div>
</body>

得到的效果：

 

 

 

4. 相对定位元素，margin-left:50%; transform:translatex( -50%)。[margin,padding相对于包含块宽度的百分比] 【终极方案】

例子：对盒子设置相对定位属性，在用上面方式进行定位；

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        position: relative;
        margin-left: 50%;
        transform: translatex(-50%);
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

得到的效果：


垂直居中（方法与上面类似，我就不演示了）

1. 单行文本垂直居中，设置父元素的line-height为包含块高度。

2. 弹性盒设置align-items:center，让弹性项目在侧轴上居中。

3. 相对定位元素，top：50%；transform:translatey(-50%)。【终极方案】

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网