浅谈CSS的居中方式

最新推荐文章于 2023-08-12 22:49:16 发布

Rockey-许诺

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量222

点赞数 1

分类专栏：前端面试题文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_44082693/article/details/117919834

版权

前端面试题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先简单介绍一下行内元素和块级元素。

行内元素

和其他元素都在同一行
高，行高及外边距和内边距部分可以改变
宽度只与内容有关
行内元素只能容纳文本或者其他行内元素
常用内联元素：a,img,input,lable,select,span,textarea,font

块级元素

总是在新行上开始，占据一整行
高度，行高以及外边距和内边距都可控制
宽度始终与浏览器的宽度一样，与内容无关
可以容纳行内元素和其他块级元素
常用的块级元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

居中方式分为三种：水平居中，垂直居中，水平垂直居中。

1、水平居中

1.1、行内元素水平居中

利用 text-align:center 可以实现在块级元素内部的行内元素水平居中。

此方法对行内元素，行内块元素水平居中都有效

例如：

<div class=center>

</div>

.center{

height:60px;

border:2px deshed blue;

text-align:center;

}

1.2、块级元素水平居中

通过把固定宽度的块级元素的margin-left 和 margin-right 设置成auto，可使块级元素水平居中

<div>
        <p class="center">
            美化的终点是简约,而简约即是美
        </p>
</div>

 div {
        height: 250px;
        border: 2px dashed yellow;
    }
    
    .center {
        margin: 0 auto;
        width: 150px;
        padding: 50px;
        color: green;
        background-color: black;
        font-size: 25px;
    }

2、垂直居中

2.1、单行行内元素垂直居中

通过设置内联元素的高度（height）和行高（line-height）相等，从而使元素垂直居中。

<div id="box">
    美化的终点是简约。
</div>
#box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
}

2.2、多行元素垂直居中

利用表布局的 vertical-align:middle 可以实现子元素的垂直居中。

<div class="center-table">
    <p class="v-cell">
        The more technology you learn,<br>
        the more you realize how little you know.
    </p>
</div>

.center-table {
    display: table;
    height: 140px;
    border: 2px dashed #f69c55;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

2.3块级元素垂直居中

已知居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中。

<div class="parent">
    <div class="child">控制复杂性是计算机编程的本质。</div>
</div>
.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    color:#fff;
    background: #000;
}

固定高度块级元素居中

3、水平垂直居中

3.1、直接使用text-align=center;vertical-align:middle

<body>
    <div class="center-table">
        <p class="v-cell">
            The more technology you learn,<br> the more you realize how little you know.
        </p>
    </div>
</body>

</html>
<style type="text/css">
    .center-table {
        display: table;
        width: 1920px;
        border: 2px dashed #f69c55;
    }
    
    .v-cell {
        vertical-align: middle;
        text-align: center;
    }
</style>

3.2、固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

<body>
    <div class="parent">
        <div class="child">学习计算机框架与知识</div>
    </div>
</body>

</html>
<style type="text/css">
    .parent {
        height: 140px;
        position: relative;
        border: 2px dashed #f69c55;
    }
    
    .child {
        width: 200px;
        height: 80px;
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -110px;
        background: black;
        color: #fff;
        text-align: center;
    }
</style>