CSS学习笔记(九) 居中方案

在 CSS 中，居中对齐是我们常常需要用到的布局方式，下面介绍一些常用的居中方法

1、文字居中

（1）文字水平居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        text-align: center; /* 设置文字居中对齐 */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

（2）文字垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        display: table-cell;    /* 设置元素生成框的类型为 表格单元 */
        vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐  */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

（3）文字垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        line-height: 300px; /* 设置 lin-height 属性，值与 height 属性相等 */
    }
    .item {
        margin: 0;  /* 设置 margin  值为 0，防止偏移 */
        padding: 0; /* 设置 padding 值为 0，防止偏移 */
        display: inline-block;  /* 设置元素生成框的类型为 行内块框 */
        vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐 */
        line-height: 24px; /* 设置行高，覆盖父元素设置 */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

2、块框居中

（1）块框水平居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
        margin: 0 auto; /* 设置外边距，上下外边距为 0，左右外边距为 auto（自动居中处理） */
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

（2）块框垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
        position: relative; /* 设置 position 为 relative */
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
        position: absolute;  /* 设置 position 为 absolute */
        top: 50%; /* 距离定位元素顶部 50% */
        transform: translateY(-50%); /* 沿着 Y 轴反向偏移 50% */
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

（3）块框水平、垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
        display: flex;           /* 使用 Flex 布局 */
        flex-direction: row;     /* 设置主轴沿着水平方向 */
        justify-content: center; /* 设置沿着主轴对齐方式 居中对齐 */
        align-items: center;     /* 设置沿交叉轴对齐方式 居中对齐 */
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】

posted @ 2019-09-04 12:03  半虹  阅读(247)  评论(0)  编辑  收藏  举报