CSS三种垂直居中的方法

最新推荐文章于 2023-07-18 16:13:09 发布
最新推荐文章于 2023-07-18 16:13:09 发布
阅读量194 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40871345/article/details/100307493
版权

CSS三种垂直居中的方法

本文主要介绍了三种方法实现垂直居中,主要实现的代码在有注释的地方！

1.使用table布局,这里居中了盒子，如果想使文本内容居中在盒子内部设置table布局:

  
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='container'>

        <div id='box1'>
            <p>盒子1</p>
        </div>

        <div id='box2'>
            <p>盒子2</p>
        </div>

        <div id='box3'>
            <p>盒子3</p>
        </div>

    </div>
</body>

</html>

<style>
    #container {
        height: 600px;
        width: 600px;
        background-color: bisque;
        display: table-cell; //把大盒子设置为table布局
        vertical-align: middle //垂直属性设置为居中
    }

    #box1 {
        height: 100px;
        width: 100px;
        background-color: coral;
        margin: 0 auto;//盒子水平居中
    }

    #box2 {
        height: 100px;
        width: 100px;
        background-color: cornflowerblue;
        margin: 0 auto;//盒子水平居中
    }

    #box3 {
        height: 100px;
        width: 100px;
        background-color: darkgoldenrod;
        margin: 0 auto;//盒子水平居中
    }
</style>

在这里插入图片描述
2.设置行高＝盒子高度，对盒子内的文本水平垂直居中，无法对盒子居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='container'>

        <div id='box1'>
            <p>盒子1</p>
        </div>

        <div id='box2'>
            <p>盒子2</p>
        </div>

        <div id='box3'>
            <p>盒子3</p>
        </div>

    </div>
</body>

</html>

<style>
    #container {
        height: 600px;
        width: 600px;
        background-color: bisque;
    }

    #box1 {
        height: 100px;
        width: 100px;
        background-color: coral;
        line-height: 100px;　//设置行高＝盒子高
        text-align: center　//文本水平居中
    }

    #box2 {
        height: 100px;
        width: 100px;
        background-color: cornflowerblue;
        line-height: 100px; //设置行高＝盒子高
        text-align: center　//文本水平居中

    }

    #box3 {
        height: 100px;
        width: 100px;
        background-color: darkgoldenrod;
        line-height: 100px; //设置行高＝盒子高
        text-align: center //文本水平居中
    }
</style>

在这里插入图片描述
3.使用flex布局，推荐！简洁，高效～

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='container'>

        <div id='box1'>
            <p>盒子1</p>
        </div>

        <div id='box2'>
            <p>盒子2</p>
        </div>

        <div id='box3'>
            <p>盒子3</p>
        </div>

    </div>
</body>

</html>

<style>
    #container {
        height: 600px;
        width: 600px;
        background-color: bisque;
        display: flex; //设置flex布局
        justify-content: center; //主轴内容居中
        align-items: center　//叉轴内容居中

    }

    #box1 {
        height: 100px;
        width: 100px;
        background-color: coral;
        //对里面的文本居中
        display: flex;
        justify-content: center;
        align-items: center

    }

    #box2 {
        height: 100px;
        width: 100px;
        background-color: cornflowerblue;
        //对里面的文本居中
        display: flex;
        justify-content: center;
        align-items: center

    }

    #box3 {
        height: 100px;
        width: 100px;
        background-color: darkgoldenrod;
        //对里面的文本居中
        display: flex;
        justify-content: center;
        align-items: center

    }
</style>

在这里插入图片描述

ssSean.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS垂直居中的三种方式
最好的一天
01-03 2177
在说垂直居中之前先看一下水平居中，相对于垂直居中来说水平居中就简单多了：        如果是一个行内元素，就对它的父级直接使用text-align: center;        如果是一个块级元素，就对它自身使用margin: auto; 说完水平居中再来看垂直居中，这里讲述三种常见的方法： 1.基于绝对定位（要求元素具有固定的宽度和高度） 借助calc()函数，可以简化以上代码...
三种垂直居中的方法
兔子juan的博客
08-15 1177
总结三种常用的垂直居中的方法 1.多个块级元素垂直居中，利用绝对定位以及transform，适用于不知道元素的宽度和高度。 .parent{ position:relative; } .child{ position:relative; top: 50%; transform: translateY(-50%); /*CSS3的新属性*/ } 2、使用dipla...
CSS 实现垂直居中的三种方法
半夏_2021的博客
04-21 263
CSS 实现垂直居中的三种方法
三种方法实现垂直居中
weixin_42628334的博客
07-23 86
这里主要写了三种方法 一种是给父元素设置position：relative； 子元素设置absolute，然后上下左右都为0，margin：auto，这便成了脱离文档的垂直居中。 <div class="main"> <div class="container"></div> .main{ width: 400px; height: 400px; pos...
Css实现垂直居中的几种方法
weixin_49693227的博客
02-15 196
Css实现垂直居中 垂直居中是布局中十分常见的效果之一，为实现良好的兼容性， 方法1：绝对定位和负边距 .box3{position:relative;}.box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px;
常用的css将元素垂直居中的6种方法
01-08
常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height，可使单行文本垂直居中 例： div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下： ...
CSS设置多行文本垂直居中的方法
12-13
总结起来，CSS设置多行文本垂直居中有多种方法，包括`display: table-cell`结合`vertical-align: middle`，以及使用绝对定位和`transform`。每种方法都有其适用场景和限制，开发者应根据实际需求选择合适的技术。在...
CSS 垂直居中五种实现方法
12-29
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。...
使用css实现div垂直居中的示例
09-25
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
CSS实现垂直居中的几种方法
12-13
有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一： 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: ”...
三种css垂直居中方案
zach 的博客
07-11 408
前言 在使用CSS进行页面布局时，垂直居中的实现不像水平居中那么方便，下面分享3种实现垂直居中的方案。 准备 以下面html为基础进行扩展，一个div里包含一个img，目的是使图片相对于div垂直居中，为了清晰div和图片设置了不同颜色的边框。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
三种方式实现div垂直水平居中
weixin_43719616的博客
11-11 709
起因是因为一个人问我怎么实现水平垂直居中，我回答说margin：0 auto然后再align-item：center，额结局就是他说我说错了，还说我是不是没做过，啊啊啊啊啊啊很不开心，很羞耻，所以马上就百度了一下。后来总结了一下三种。 1.用display中的table-cell <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div居中</title>
垂直水平居中的3种方法
牧师的博客
01-05 317
垂直水平居中 这篇文章结合了 垂直居中和水平居中来进行设置 垂直水平居中，单独垂直居中和水平居中可以看我之前的文章 1.display:inline-block text-align:center (水平居中) + display:table-cell vertical-align:middle（垂直居中） 2.absolute + transform 3.display:flex + ...
ss水平、垂直居中的写法
longshiyue2的博客
07-08 183
水平居中 行内元素:text-align: center 块级元素:margin: 0 auto position:absolute;left:50%; transform:translateX(-50%); display:flex;justify-content: center; 垂直居中 设置line-height 等于height position：absolute ;top:50%; transform:translateY(-50%) display:flex;align-it..
CSS 垂直居中的正确打开方式
zz_jesse的博客
12-12 1064
点击上方关注前端技术江湖，一起学习，天天进步web-css-gaoji-jichu.jpeg前言之爆锤面试官神器 - CSS无论是实际开发中，亦或者是求职面试中，css 垂直居中往往都是...
元素水平垂直居中的三种方式
最新发布
daishu_shu的博客
07-18 191
元素水平垂直居中的方式常见的我知道的就是这三种了，希望对你有帮助。
实现垂直居中的几种方式
热门推荐
RunningSnail
07-11 2万+
方式一：单行文本垂直居中 其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。 当然也有道友说其实这个地方设置height值其实完全没有必要，容器会根据line-height自动撑开。这个理论实际上是正确的，他的正确的前提在于该元素内只有文本节点。 但是如果父级元素不设置高度
垂直居中的三种方法及其优缺点
Johnny Liao的博客
06-07 791
父元素，子元素高度不一定 第一种： .parent{ display: table-cell; vertical-align: middle; }优点： 兼容性好缺点：IE6-7 需改HTML结构 第二种： .parent{ display: relative; } .child{ position: absolute; left: 50%; transform: t
垂直水平居中的三种实现方式
XYZ
08-04 1170
今天向一位朋友请教垂直水平居中问题，没想到朋友直接给出了三种实现方式，这里记录下来。 如图所示，登陆页中有一个登陆表单，我们需要将表单内容垂直水平居中。 这里，为了简单起见，以如下的html为例： <div class='a1'> <div class="a2">需要垂直水平居中的元素</div> </div> 样式初始化 *{ margin:0; padding:0; } html, body{ height: 100%; } 最终我们想要实
css垂直居中的几种方法
06-28
下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值