CSS水平居中与垂直居中的方法

简介: CSS水平居中与垂直居中的方法

当我们页面布局的时候,通常需要把某一个元素居中,这一篇文章为大家介绍一下居中的几种方法,本人文笔有限,请见谅!

一.水平居中

行内元素水平居中的方法,我们使用text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
            /* 水平居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是需要水平居中的文字</span>
    </div>
</body>
</html>

块元素水平居中的方法

1.margin(外边距)的方法来做,使用margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
            margin: 0 auto; 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.使用absolute加margin-left的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向右百分之50 */
            left: 50%;
            /* 外边距再减自身宽度的一半 */
            margin-left: -150px;
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">我是定位加margin</div>
</body>
</html>

3.使用absolute加transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向右百分之50 */
            left: 50%;
            /* 横向上向左移动自身宽度的一半 */
            transform: translateX(-50%);
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">我是定位加transform</div>
</body>
</html>

4.flex弹性盒子方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: orange;
        /* 给父级开启弹性盒子 */
        display: flex;
        /* 主轴对齐方式 */
        justify-content: center;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

二.垂直居中

行内元素垂直居中,使用line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .box {
            width: 300px;
            height: 50px;
            background-color: orange;
            /* 行高等于全部高度 */
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box"><span>我是垂直居中</span></div>
</body>
</html>

块元素垂直居中方法:

1.使用absolute加margin-top的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .boss {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向下百分之50 */
            top: 50%;
            /* 外边距再减自身高度的一半 */
            margin-top: -25px;
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box">我是定位加margin</div>
    </div>
</body>
</html>

2.flex方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: orange;
        /* 给父级开启弹性盒子 */
        display: flex;
        /* 侧轴对齐方式 */
        align-items: center;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

3.使用absolute加transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        .boss {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box {
            /* 给加一个绝对定位 */
            position: absolute;
            /* 向下百分之50 */
            top: 50%;
            /* 横向上向上移动自身宽度的一半 */
            transform: translateY(-50%);
            /* 给块元素设置宽高 */
            width: 300px;
            height: 50px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box">我是定位加transform</div>
    </div>
</body>
</html>

感谢大家的阅读,如有什么不对的地方,可以向我提出,感谢大家!

相关文章
|
4天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
10 1
|
4天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
4天前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
19 1
|
4天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
12 0
|
4天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
21 0
|
4天前
|
前端开发
css声明方法
【4月更文挑战第14天】css声明方法
19 6
|
前端开发 容器
CSS布局之水平居中布局
水平居中布局指的是当前元素在父级元素容器中,水平方向是居中显示的。
467 0
|
前端开发 容器
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
4天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1