css常见居中方式

最新推荐文章于 2023-11-22 14:48:11 发布

失眠时间

最新推荐文章于 2023-11-22 14:48:11 发布

阅读量440

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weiCong_Ling/article/details/134283824

版权

文章目录

前言
一、水平居中
二、垂直居中

前言

页面布局基本都会有居中样式，包括水平居中、垂直居中等

一、水平居中

1、使用`text-align + inline-block`水平居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用 text-align + inline-block 水平居中</title>
<style>
    .wrap{
        height: 200px;
        text-align: center;
        border: 1px solid red;
    }
    .wrap .text{
        height: 100px;
        width: 300px;
        display: inline-block;
        border: 1px solid blue; 
    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
</body>
</html>

2、使用定位`postion` + 变形`transform`水平居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）水平居中</title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            border: 1px solid blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
</body>

</html>

3、使用 `margin: 0 auto + display: block` 水平居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用 margin: 0 auto + display: block 水平居中</title>
    <style>
        .wrap {
            height: 200px;
            border: 1px solid red;
        }

        .wrap .text {
            height: 100px;
            width: 300px;
            display: block;
            border: 1px solid blue;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="text">我是元素1</span>
    </div>
</body>

</html>

4、使用`css3`新特性`flex`弹性盒子布局水平居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局水平居中</title>
    <style>
       .wrap {
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
        }
        .wrap .text {  
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="text">我是元素1</span>
    </div>
</body>

</html>

二、垂直居中

1、固定高度（height） = 行高（line-height）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>固定高度（height） = 行高（line-height）</title>
    <style>
        .wrap {
            height: 300px;
            line-height: 300px;
        }

        .wrap .text {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
</body>

</html>

2、使用定位（postion） + 变形（transform）垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用定位（postion） + 变形（transform）垂直居中</title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;
            position: relative;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            position: relative;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: #FB7299;
            margin: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
    <div id="div1">
        <div id="div2">
            子容器的垂直居中
        </div>
    </div>
</body>

</html>

3、使用display: table-cell + vertical-align 垂直居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>display: table-cell + vertical-align 垂直居中</title>
    <style>
        .wrap {
            height: 600px;
            width: 300px;
            border: 1px solid red;

            display: table-cell;
            vertical-align: middle;
        }

        .wrap .text {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        #div1 {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /* 使容器水平边距自动相等 */
            border: 1px solid red;
            /* 给文本加上边框可以更清楚地看到效果 */
            display: table;
        }

        #div2 {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
    <div id="div1">
        <div id="div2">
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
            多行文本的垂直居中
        </div>
    </div>
</body>

</html>

4、使用`css3`新特性`flex`弹性盒子布局垂直居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>flex弹性盒子布局垂直居中</title>
    <style>
        .wrap {
      height: 600px;
      width: 300px;
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .wrap .text {  
      width: 300px;
      height: 100px;
      border: 1px solid blue;
  }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="text">我是元素1</div>
    </div>
</body>

</html>