关于css中的水平垂直居中问题总结

最新推荐文章于 2024-03-19 00:15:00 发布

monster1935

最新推荐文章于 2024-03-19 00:15:00 发布

阅读量448

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/a1247529789/article/details/51439665

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、水平居中

需要居中的元素为常规流的inline元素，则只需要设置父元素的text-align:center即可。
测试用例：

<style>
    .main{
        height:40px;
        background-color: #000;
        color:#fff;
        text-align:center;
    }
    .test{
        background-color: red;
    }
</style>

<div class="main">
        <span class="test">helloworld</span>
</div>

水平居中inline元素

需要居中的元素是常规流中的block元素
测试用例：

<style>
    .main{
        height:100px;
        background-color: #000;
    }
    .test{
        width:200px;
        height:100%;
        margin:0 auto;
        background-color: red;
    }
</style>
<div class="main">
        <div class="test"></div>
</div>

水平居中block元素
3. 需要居中的元素是浮动元素
测试用例：

<style>
    .main{
        height:100px;
        background-color: #000;
    }
    .test{
        width:200px;
        height:100%;
        float:left;
        left:50%;
        position:relative;
        margin-left: -100px;
        background-color: red;
    }
</style>
<div class="main">
        <div class="test"></div>
</div>

4.需要定位的元素为absolute元素
测试用例：

<style>
    .main{
        height:100px;
        background-color: #000;
    }
    .test{
        width:200px;
        height:100px;
        position: absolute;
        left:50%;
        margin-left: -100px;
        background-color: red;
    }
</style>
<body>
    <div class="main">
        <div class="test"></div>
    </div>
</body>

<style>
    .main{
        height:100px;
        background-color: #000;
    }
    .test{
        width:200px;
        height:100px;
        position: absolute;
        left:0;
        right:0;
        margin:0 auto;
        background-color: red;
    }
</style>
<body>
    <div class="main">
        <div class="test"></div>
    </div>
</body>

二、垂直居中
1.需要居中的元素为单行文本，设置其文本包含元素的line-height大于font-size即可。这种原理是利用设置行高达到文本内容居中的效果。
测试用例：

<style>
    .test{
        background-color: #000;
        color:#fff;
        text-align: center;
        line-height:40px;
    }
</style>
<body>
    <p  class='test'>THIS IS A TEXT</p>
</body>

2.实现水平垂直居中
a.使用margin:auto的形式
测试用例：

<style>
    .container{
        position: relative;
        height:500px;
        width:1000px;
        background-color: #000;
    }
    .content{
        height:50%;
        width:50%;
        margin: auto;
        position: absolute;
        top: 0;
        right:0;
        bottom:0;
        left:0;
        background-color: green;
    }
</style>
<body>
    <div class="container">
        <div class="content">

        </div>
    </div>

</body>

b.使用负外边距的形式

<style>
    .content{
        position: absolute;
        width:400px;
        height:400px;
        left:50%;
        top:50%;
        margin-left: -200px;
        margin-top:-200px;
        background-color: #000;
    }
</style>
<body>
    <div class="content"></div>
</body>

c.使用css中transform的形式

<style>
    .content{
        width: 50%;
        height:50%;
        margin: auto;
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        background-color: #000;
    }
</style>
<body>
    <div class="content"></div>
</body>

monster1935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css中的水平垂直居中问题总结

一、水平居中需要居中的元素为常规流的inline元素，则只需要设置父元素的text-align:center即可。测试用例：<style> .main{ height:40px; background-color: #000; color:#fff; text-align:center; } .test{
复制链接

扫一扫

专栏目录