css常见居中方式

文章目录

  • 前言
  • 一、水平居中
    • [1、使用`text-align + inline-block`水平居中](#1、使用text-align + inline-block水平居中)
    • [2、使用定位`postion` + 变形`transform`水平居中](#2、使用定位postion + 变形transform水平居中)
    • [3、使用 `margin: 0 auto + display: block` 水平居中](#3、使用 margin: 0 auto + display: block 水平居中)
    • 4、使用`css3`新特性`flex`弹性盒子布局水平居中
  • 二、垂直居中
    • [1、固定高度(height) = 行高(line-height)](#1、固定高度(height) = 行高(line-height))
    • [2、使用定位(postion) + 变形(transform)垂直居中](#2、使用定位(postion) + 变形(transform)垂直居中)
    • [3、使用display: table-cell + vertical-align 垂直居中](#3、使用display: table-cell + vertical-align 垂直居中)
    • 4、使用`css3`新特性`flex`弹性盒子布局垂直居中

前言

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


一、水平居中

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

html 复制代码
<!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水平居中

html 复制代码
<!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 水平居中

html 复制代码
<!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弹性盒子布局水平居中

html 复制代码
<!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)

html 复制代码
<!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)垂直居中

html 复制代码
<!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 垂直居中

html 复制代码
<!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弹性盒子布局垂直居中

html 复制代码
<!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>
相关推荐
沉香亭北3 分钟前
vue+vite 全局主题
前端
郑州小张3 分钟前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
这是个栗子21 分钟前
HTML(一)
javascript·ajax·css3·html5
海底火旺23 分钟前
探索扣子:解锁中间技能模块的无限可能
前端·人工智能·coze
Amctwd28 分钟前
【HTML】HTML 与 CSS 基础教程
前端·css·html
快乐星球喂1 小时前
使用vant轮播组件swipe
前端
泡泡oO1 小时前
vue脱敏组件封装(适用于多种场景)——超详细手把手一步步教你使用
前端·javascript·vue.js
kiteOffice1 小时前
使用@page 边距 at 规则 + modern-screenshot 定制打印输出内容
前端
HarryHY1 小时前
VUE3 ref 和 useTemplateRef
前端·javascript·vue.js
穗余1 小时前
WEB3全栈开发——面试专业技能点P7前端与链上集成
前端·web3