CSS实现块级元素水平垂直居中

最新推荐文章于 2024-03-06 09:03:31 发布
最新推荐文章于 2024-03-06 09:03:31 发布
阅读量901 收藏 2
点赞数
分类专栏： CSS 文章标签： CSS 垂直水平居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanhanyoona/article/details/84550507
版权

块级元素水平垂直居中一直是常考面试体,工作中也经常会用到,在这里就汇总使用css实现块级元素水平垂直居中的方法.欢迎补充.

方法一: 父级元素position:relative, 子元素position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;

<!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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: grey;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto; 
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>

</body>

</html>

方法二:父级元素position:relative, 子元素position:absolute;top:50%;left:50%;margin-left:-(子元素宽度的一半);margin-top:-(子元素高度的一半).

<!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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: grey;
            position: relative;
        }

       
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>

</body>

</html>

方法三:使用transform:translate(-50%, -50%);

<!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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: grey;
            position: relative;

        }

        
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>

</body>

</html>

方法四: 使用flex布局 align-items: center;

<!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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>

</body>

</html>

方法五: 使用flex布局 flex-direction: column;align-self: center;

<!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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .wrap {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: grey;
            display: flex;
            flex-direction: column;
            justify-content: center;
         
        }
 
        
        .box {
            align-self: center;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
 
</body>
 
</html>

方法六: display: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>元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .wrap {
            width: 500px;
            /* height: 500px; */
            padding: 100px;
            margin: 0 auto;
            background-color: grey;
            display: table;
        }
 
        
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: table-cell;
            vertical-align: center;

        }
    </style>
</head>
 
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
 
</body>
 
</html>

欢迎补充!

五花毛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
CSS实现文本居中和块级元素居中
jhfvuyhgui的博客
03-30 4215
一、文本居中 1.文本水平居中：给文本的父盒子设置text-align: center;即可 2.文本垂直居中: 给文本的父盒子设置line-height的值与父盒子height的值相等 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignor
css实现元素居中的6种方法
热门推荐
富朝阳的博客
09-22 3万+
相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。给定两个元素，这两个元素是父子级关系并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。
CSS实现块级元素水平垂直居中的3种常用方式
最新发布
Lipn_的博客
03-06 467
一篇文章轻松掌握css块级元素水平垂直居中
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
CSS块级元素水平垂直居中常用的几种方式
过去属于死神，未来属于自己
12-22 1380
提示：本文总结了在工作中常用的4种块级元素水平垂直居中方法，希望对你有所帮助。
让一个块级元素垂直居中的八种方法
zhang_yu_ling的博客
05-22 3万+
怎么让一个元素垂直居中 文章目录怎么让一个元素垂直居中前言正题 前言 今天有个web前端的面试，公司挺大的，全国各地还都有分支机构，估计是因为最近缺人吧，所以我非常幸运的通过了简历筛选。但是过程有点。。。因为面试官问我的很多基础的问题我都半懂不懂的，主要还是基础没打牢，唉，感觉受到了一万点暴击，又错过了一个亿！！！ 正题 题目就是面试官问我的其中一个问题，很搞笑的是，在上个月我同桌还问过我这个问...
CSS行内元素和块级元素的居中实例分析
12-13
一.水平居中　 　行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center...这种方式使居中元素变成行内元素而致使无法设置宽高;　 　3.设置父元素float:left,position:relative,left:50%;子元素
水平居中块级元素较好的实现
12-13
但block level的元素的宽度默认等于父元素的宽度，这样的话内容将从黄色左边界开始显示. 且设置text-align: center; 只能将文字居中而无法将背景图片居中且显示在文字的左边。 之前想的一个做法： 给内容区 设置...
DIV+CSS垂直居中一个浮动元素
09-25
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
01-21
作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 栗子1：从最简单的水平居中开始 margin: 0 auto; 块级元素使用...
CSS元素居中多种方法
weixin_57844432的博客
10-24 3647
CSS元素居中多种方法。
【学习笔记】块级元素水平垂直居中方法
weixin_30678821的博客
04-01 495
本文以<div>元素为例 本文转载 1.已知块级元素的宽和高，使用绝对定位absolute和外边距实现水平垂直居中。 父元素position:relative，子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2; （思想：先把块级元素中的左上角定位到父元素的中心，然后再向...
块级元素水平垂直居中的5种技巧
qq_34295211的博客
05-05 4003
元素居中分为水平居中，垂直居中，还有水平垂直居中这三类。其中文本元素和块元素的居中方式又有略微不同。平时工作中我们最常见的就是块级元素的水平垂直居中和文字的水平居中了。下面是几种块级元素水平垂直居中的方式。 方式1：margin: auto + 绝对定位 .wrapper { position: relative; background: yellow; ...
CSS中实现块级元素水平居中的N种方法
phenix323的博客
07-28 1万+
CSS中实现块级元素水平居中的N种方法： CSS中的居中可分为水平居中和垂直居中。 水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。 下面详细介绍这几种情况。 一、水平居中 1、行内元素居中 顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素， 可通过给父元素设置 text-align:center 来实现。 另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。 但有个首要条件是
css 实现块级元素水平垂直居中的方式分析
forever__fish的博客
03-12 177
【代码】css 实现块级元素水平垂直居中的方式分析。
居中问题
vincerne的博客
03-13 537
css样式—字体垂直、水平居中 啦啦啦 复制代码 复制代码 .tt{ padding: 0px; width:500px; height:200px; text-align:center; background-color:#F69; display: table-cell; vertical-align:middle } 复制代码 复制代码 为啥呢，这是...
css元素居中的5种方法分享
xiaoweids的博客
07-22 1792
但是这个属性有一个缺点需要一个参照物，也就是说如果父级里面有两个子元素，两个子元素都设置了vertical-alignmiddle，那么得到的效果只是这两个元素之间居中对齐而已。效果图就不看了吧，思路感觉也没啥可解释的，这都是css3的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。当然了，如果说你在实际布局中，确实有两个元素，并且其中一个元素可以设置为高度百分百的话，这么做是可以的。思路父级相对定位，子级绝对定位，而top，left这两个属性的如果给百分比；...
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
块级元素水平垂直居中的方法flex
09-03
在CSS中，要使块级元素水平垂直居中最简单的方法是使用弹性布局（flex）。 首先，我们需要将包含块级元素的父元素设置为弹性容器，可以使用以下代码来实现： .container { display: flex; justify-content: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值