CSS居中方法总结

332 阅读2分钟

前言:本文记录文本居中、水平居中、垂直居中、万能居中方法以及绝对居中方法,若有错误还请指正!

1.文本居中

+ height + line-height:两者配合使用,垂直方向居中

  • text-align:父级的 text-align,水平方向居中

注意:text-align:center ;只是将子元素里的内联元素居中 如果不是内联元素就要用到 margin: 0 auto;

 <div class="word">
    <p>优秀</p>
 </div>
 .word {
    width: 100px;
    height: 30px;
    background-color: #e5e5e5;
    text-align: center;
    line-height: 30px;
    font: size 14px;
}

image.png 优秀这两个字在 div 中妥妥居中。

2.水平居中

水平居中分两种情况

  • 定宽块元素水平居中

定宽 + 块元素

<div class="wrap"></div>
.wrap {
    width: 200px;
    height: 200px;
    border: 1 soild red;
    margin: 0 auto; /*宽度必须给值*/
}

image.png

  • 不定宽块元素水平居中
    • 改变为行内元素,然后使用 text-align:center 处理,多用于不定项导航的 ul 的居中
<div>
    <ul>
        <li>11111</li>
        <li>22222</li>
    </ul>
</div>
.nav {text-align:center;}
.nav ul {display: inline;}

image.png

  • 不定宽块元素水平居中

3.父元素浮动 left:50%;

同时要设置 position:relative(给子元素相对定位一个参考)

子元素相对定位 position:relative;left:-50%;

<div class="parent">
    <div class="son">子盒子</div>
</div>
.parent {
    position: relative;
    left: 50%;
    float: left;
    width: 300px;
    height: 300px;
    background-color: pink;
}

.parent .son {
    position: relative;
    left: -50%;
    width: 150px;
    height: 150px;
    background-color: red;
}

image.png

4.垂直居中

垂直居中也分两种情况

  • 块级元素垂直居中,子元素知道具体宽高

设置 top:50%,这个块元素的最上边为垂直居中的位置,但是这样整体的内容并不是垂直居中,所以要设置 margin-top: -2/父宽 px; //为高度的一半,这样这个块元素又相对于自身最上面向上又移动了自身的 50 因此就垂直居中了。

<style>
    .parent {
        /* 父元素 */

    }

    .parent .son {
        position: absolute;
        width: 100px;
        height: 100px;
        background: red;
        top: 50%;
        margin-top: -50%;
        /* 为高度的一半 */
    }
</style>
</head>

<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>
  • 子元素不知道具体宽高

  • 这种情况有三种方法:

    • 借助 table 布局
      • display:table-cell 实现法
      • display:table-cell 主要针对多行文字内容的垂直居中对齐
      • display:table-cell 此元素会作为一个表格单元格显示(类似 <td> <th>
    div {
        display: table-cell;
        width: 200px;
        height: 200px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #F00;
    }
    
    • 借助 translate 的 transform 属性
    .parent{
        position: relative;
    }
    
    .parent .son {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    • 用 flex 布局
    .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    

5.万能居中方法

首先移动子元素高度(宽度)的一半:left:50%;(top:50%;)

再移动父元素高度(宽度)的一半:margin-left:-宽/2;(margin-top:-高/2;)

前提:必须要知道子元素的宽高

    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

效果效果: image.png

6.绝对居中

<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        overflow: hidden;
    }
</style>
</head>

<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>

效果如下: image.png

总结: 居中的方法有很多,不局限以上这几种居中方法