精华内容
下载资源
问答
  • css水平垂直居中
    2022-01-10 21:39:34
    .title{
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;
        text-align: justify;
    }

    更多相关内容
  • 16种CSS水平垂直居中方法

    千次阅读 2022-03-22 16:44:20
    16种css水平垂直居中方法以及应用(文字、图片) 一、垂直居中 1、行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 ...

    16种css水平垂直居中方法以及应用(文字、图片)

    一、垂直居中
    1、行内元素

    基本思想:单行文本子元素line-height 值为父元素 height 值

    .parent {
        height: 200px;
    }
    
    .son {
        line-height: 200px;
    }
    
    2、块级元素
    2.1行内块级元素

    基本思想:元素是行内块级,使用display: inline-block, vertical-align: middle+伪元素处于容器中央

    兼容性:支持IE7

    .parent::after, .son{
        display:inline-block;
        vertical-align:middle;
    }
    .parent::after{
        content:'';
        height:100%;
    }
    
    2.2table布局

    兼容性:支持IE6/IE7,IE8无效

    .parent {
      display: table;
    }
    .son {
      display: table-cell;
      vertical-align: middle;
    }
    
    2.3flex弹性布局

    2009版写法

    兼容性:不支持IE

    .parent {
        display: box;
        box-orien: vertical;
        box-pack: center;
    }
    

    2012版写法

    兼容性:IE8/IE9不支持

    .parent{
      display:flex;
      justify-content:center;
    }
    .son{
      align-self:center;
    }
    
    2.4绝对定位+transform:translate(-50%,-50%)
    .parent{
      position:relative;
    }
    .son{
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    
    二、水平居中
    1、行内元素

    基本思想:父元素设置text-align: center即可实现行内元素水平居中

    .parent {
        text-align: center;
    }
    
    2、块级元素
    2.1一般居中

    基本思想:该元素设置margin:0 auto

    .son {
        margin: 0 auto;
    }
    
    2.2子元素含float

    基本思想:子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin,fit-content是css3的新属性值

    .parent{
        width:fit-content;
        margin:0 auto;
    }
    
    .son {
        float: left;
    }
    
    2.3 flex弹性布局

    2009版本写法

    .parent{
        display:box;
        box-orient:horiaontal;
        box-pack:center;
    }
    

    2012版写法

    .parent{
        display:flex;
        justify-content:center;
    }
    
    2.4绝对定位
    • transform
    .son{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
    }
    
    • 负值margin-left
    .son{
        position:absolute;
        with:固定宽度
        left:50%;
        margin-left:-0.5*固定宽度;
    }
    
    • left:0;right:0;margin:0 auto
    .son{
        position:absolute;
        width:固定宽度;
        left:0;
        right:0;
        margin:0 auto;
    }
    
    三、具体应用–文字居中
    3.1css如何设置文字水平居中

    基本思想:css使用text-align规定水平对齐方式,影响一个元素的文本行相互的对齐方式。center值设置文本居中

    注意:text-align应用与容器,针对容器里面的文字以及容器里面的display:inline/inline-block,若是display:block无影响

    text-align具备向下传递的特点,设置一个div,div里面的也会居中

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 水平居中了--文本文字</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    3.2css如何设置文字垂直居中
    • 单行文本:基本思想是行高(line-height)和所在区域高度(height)设置一致
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                line-height: 80px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--单行文本</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    • 多行文本

    (1)当父级元素高度不固定

    当父级元素不固定,会随着内容变化,高度只能通过文本的高度来撑开,所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                margin: 50px auto;
                background: rgb(228, 178, 187);
                padding-top: 50px;
                padding-bottom: 50px;
                padding-right: 20px;
                padding-left: 20px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度不固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    (2)当父级元素高度固定

    vertical-align:middle +display:table-cell

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 100px;
                background: rgb(228, 178, 187);
                vertical-align: middle;
                display: table-cell;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    四、具体引用–图片居中
    4.1display:table

    基本思想:最外层div display: table+img父元素display: table-cell、vertical-align: middle

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    思考:如何在图片垂直居中基础上+水平居中

    基本思想:最外层div text-align: center(具有向下传递的特点)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
                text-align: center;/*增加的一行代码*/
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.2flex实现

    基本思想:display: flex;align-items: center

    兼容性:不是最好的选择,IE8/IE9不支持

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: flex;
                align-items: center;
            }
    
            .imgbox img {
                width: 150px;
                height: 100px;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.3绝对定位

    基本思想:img父元素相对定位position: relative+子元素绝对定位position: absolute,img的top设置为50%,负值margin-top(这个是想实现垂直居中元素高度的一半),不确定高度用transform:translateY(-50%)

    兼容性:推荐写法,兼容性好

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                position: relative;
                margin: 0 auto;
            }
    
            .imgbox img {
                width: 150px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • 主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
  • css水平垂直居中四种常用方式

    千次阅读 2022-05-10 15:04:44
    css水平垂直居中四种常用方式

    css水平垂直居中

    第一种:flex布局水平垂直居中

    思路:

    给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中。

    参考:阮一峰的flex教程

    核心代码:

    设置在父元素身上。

    display: flex;
    //父元素flex布局
    justify-content: center;
    //子元素水平居中
    align-items: center;
    //子元素垂直居中
    

    总代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .bigbox{
                width: 600px;
                height: 600px;
                border: 1px solid black;
                /* 黑色边框 */
                display: flex;
                /*父元素flex布局*/
                justify-content: center;
                /*子元素水平居中*/
                align-items: center;
                /*子元素垂直居中*/
            }
            .centbox{
                width: 200px;
                height: 200px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div class="bigbox">
            <div class="centbox"></div>
        </div>
    </body>
    </html>
    

    第二种:绝对定位和transform配合

    思路:

    先设置父元素postion:relative,因为之后要设置子元素postion:absolute,绝对定位是相对外层第一个不是static的父盒子进行定位。static是postion的默认属性

    然后把子元素的top和left都设置为50%,这时发现子盒子是向右下偏移了一些,再用transform属性把盒子偏移回来。

    核心代码:

    position: absolute;
    /*设置绝对定位*/
    /*相对第一个不是static定位的父盒子进行定位*/
    /*static是postion的默认属性*/
    left: 50%;
    top: 50%;
    /*距离第一个不是static定位的父元素上边框与左边框50%*/
    transform: translate(-50%, -50%);
    /*向左移动50%本元素宽度*/
    /*向上移动50%本元素高度*/
    

    总代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .bigbox {
                height: 300px;
                width: 300px;
                border: 1px solid black;
                position: relative;
            }
    
            .centbox {
                height: 50px;
                width: 50px;
                background-color: aqua;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    
    <body>
        <div class="bigbox">
            <div class="centbox"></div>
        </div>
    </body>
    
    </html>
    

    第三种:绝对定位与外边距auto配合

    思路:

    盒子使用绝对定位,left,top,right,bottom都设置为0,再设置margin:auto把盒子自适应居中。

    要把父盒子设置为position:relative

    核心代码:

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /*自适应外边距*/
    

    总代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .bigbox {
                height: 300px;
                width: 300px;
                border: 1px solid black;
                position: relative;
            }
    
            .centbox {
                height: 50px;
                width: 50px;
                background-color: aqua;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    
    <body>
        <div class="bigbox">
            <div class="centbox"></div>
        </div>
    </body>
    
    </html>
    

    第四种:p标签文字水平垂直居中

    思路:

    text-align用来文字水平居中,再把p标签line-height文字行高设置为父元素高度,就可以实现水平垂直居中。

    核心代码:

    text-align:center;
    line-height:600px;
    /*此时600px为父元素盒子高度*/
    

    总代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .bigbox{
                width: 600px;
                height: 600px;
                border: 1px solid black;
                /* 黑色边框 */
            }
            .bigbox{
                text-align: center;
                line-height: 600px;
            }
        </style>
    </head>
    <body>
        <div class="bigbox">
            <p>我要居中</p>
        </div>
    </body>
    </html>
    
    展开全文
  • 水平垂直居中1.利用 `position:absolute`2. 利用`margin:auto`3. 利用弹性盒子4. 利用水平对齐和行高 1.利用 position:absolute <div class="father"> <div class="son"></div> </div> ...

    1.利用 position:absolute

    <div class="father">
         <div class="son"></div>
    </div>
    
    1. 已知元素宽度和高度时,可以设置position: absolutemargin为负的宽高的一半
    <style>
        .father{
            position: relative;
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .son{
            position: absolute;
            background-color: red;
            width:50px;
            height: 50px;
            left: 50%;
            top: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
    
    1. 当元素宽度和高度未知时,可以设置position: absolutetransform: translate(-50%, -50%)
    .father{
            position: relative;
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .son{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    

    2. 利用margin:auto

    .father{
            position: relative;
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .son{
            position: absolute;
            background-color: red;
            width: 50px;
            height: 50px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    

    3. 利用弹性盒子

    通过给父元素设置display:flex来实现居中

    .father{
            display: flex;
            justify-content: center; //主轴
            align-items: center; //侧轴
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .son{
            background-color: red;
            width: 50px;
            height: 50px;
        }
    

    在这里插入图片描述

    4. 利用水平对齐和行高

    设置text-align:centerline-height:height实现单行文本水平垂直居中

    <div class="father">
         <div class="son">我要居中</div>
    </div>
    
    	.father{
    	        background-color: pink;
    	        width: 200px;
    	        height: 200px;
    	        text-align: center;
    	}
    	.son{
    	    line-height: 200px;
    	}
    

    在这里插入图片描述

    5. 最简便的方法

    flex+auto
    父元素设置flex 子元素margin:auto;

    <style>
        .g-container{
            display: flex;
            width: 300px;
            height: 300px;
            background-color:aqua;
        }
        .g-box{
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <body>
        <div class="g-container">
            <div class="g-box"></div>
        </div>
    </body>
    

    在这里插入图片描述

    展开全文
  • css水平垂直居中

    2018-06-11 09:44:23
    css不定宽高让盒子里的内容垂直水平居中.里面步骤都有,
  • 主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
  • 水平垂直居中1.margin 负值调整偏移实现兼容性: 当前流行的使用方法。.box{width: 100%;height: 100%;}.content{position: absolute;left: 50%;top: 50%;margin-left:-50px;margin-top:-50px;/* transform: ...
  • CSS水平垂直居中常见方法总结

    万次阅读 多人点赞 2017-12-02 20:15:47
    css元素水平垂直居中
  • CSS水平垂直居中 参考资料 系列文章 CSS 水平居中 CSS 垂直居中 一、前言 难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有...
  • 主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来一起看看吧。
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...水平垂直居中:使用absolue和transform&lt;/title&gt; &lt;style type="text/css"&gt; *{ m
  • CSS常用水平垂直居中的几种方法

    万次阅读 2021-12-27 09:29:36
    CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时,利用margin:auto设置元素水平垂直居中: HTML代码如下: <div class="div1"> <div ...
  • 原始代码: ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0>...link rel=stylesheet href=center.css> </head> <body> <div class=son><
  • css 实现水平垂直居中的8种方式 效果图 本文将会用多种方式实现上图效果,接下来一一列举。 基本布局 /* 样式 */ .parent { width: 200px; height: 200px; border: 1px solid black; } .parent .son { width...
  • css实现元素水平垂直居中

    千次阅读 2022-04-13 13:47:55
    css的居中,可以分为水平居中和垂直居中,实现居中的方式有以下几种: 1.text-align:center 块状元素,水平居中(只适用于块级元素,块级元素内的行内元素可以居中或者将此行内元素设置为块级元素) 2.margin:0 auto...
  • 有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一...
  • 我把一个子元素在父元素中水平垂直居中的实现方式分为三类,第一类是宽度已知,第二类是宽度未知,第三类是图片水平垂直居中。 第一类 宽度已知 第一种方式:采用绝对定位 原理 元素开启绝对定位后,水平方向和垂直...
  • 最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目...但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌? •方式一 :table 布局方法
  • 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
  • CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
  • 水平居中 行内元素 行内元素想要水平居中,只需要给父元素添加text-align:center`即可。 <div class='container'> <span>example</span> </div> .container { text-align: center; } ...
  • 实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局
  • 微信小程序 css水平垂直居中

    千次阅读 2020-08-04 10:17:06
    <view class="content"> <view></view> </view> .content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center;... height: 200r
  • 水平居中 1 行内元素水平居中 行内元素一般是文本,图标等,text-align可以控制其相对于父元素水平居中对齐 #parent{ text-align: center; } 2 margin 自动水平居中 单个块级元素,可以使用margin auto可自动...
  • css 水平垂直居中

    2020-01-15 18:53:19
    相对于页面对块元素进行垂直居中 .login { position: absolute;; width: 5rem; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  • div框水平垂直居中跟内容垂直居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,849
精华内容 25,139
关键字:

css水平垂直居中