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>
相关推荐
要加油哦~7 分钟前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
不浪brown38 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_39 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇1 小时前
前端 异步任务并发控制
前端
bysking1 小时前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu1 小时前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵1 小时前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
龚思凯1 小时前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋1 小时前
Web后端开发(请求、响应)
前端
red润1 小时前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js