CSS 水平,垂直,水平垂直居中方案——持续更新

最新推荐文章于 2023-08-11 18:56:24 发布
最新推荐文章于 2023-08-11 18:56:24 发布
阅读量220 收藏
点赞数
分类专栏： CSS 文章标签： css css3 垂直居中 水平居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k464746/article/details/109100026
版权

文章目录

准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            background: #eee;
            width: 300px;
            height: 300px;
        }
        .block{
            background: skyblue;
            width: 100px;
            height: 100px;
        }
        .inline{
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="parent">
            <div class="block">
                块级元素
            </div>
            <span class="inline">
                行内元素
            </span>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

水平居中

行内元素

text-align: center;

.parent{
            background: #eee;
            width: 300px;
            height: 300px;
            text-align: center;
        }

在这里插入图片描述

块级元素

margin: 0 auto;

.block{
            background: skyblue;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

在这里插入图片描述

flex布局

display: flex;
justify-content: center;

.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
        }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

绝对定位 定宽

position: absolute;
width: 宽度;
left: 50%;
margin-left: -0.5*宽度

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

 		.block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
        }

        .inline {
            background: pink;
            position: absolute;
            width: 100px;
            left: 50%;
            margin-left: -50px;
        }

在这里插入图片描述
position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外）， 只要设置了position：absolute、 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。

绝对定位 不定宽

position: absolute;
left: 50%;
transform: translate(-50%, 0);

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

		.block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .inline {
            background: pink;
            position: absolute;
            width: 100px;
            left: 50%;
            transform: translate(-50%, 0);
        }

在这里插入图片描述

绝对定位 left/right: 0

position: absolute;
width: 宽度;
left: 0;
right: 0;
margin: 0 auto;

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        .inline {
            background: pink;
            position: absolute;
            width: 100px;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

在这里插入图片描述

垂直居中

行内元素

父元素 height: 高度;
行内元素 line-height: 高度;

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
        }
        .inline {
            background: pink;
            line-height: 300px;
        }

在这里插入图片描述

table

父元素 display: table-cell;
子元素 vertical-align: middle;

 .parent {
            background: #eee;
            width: 300px;
            height: 300px;
            display: table-cell;
            vertical-align: middle;
        }

在这里插入图片描述

flex

display: flex;
align-items: center;

 		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            display: flex;
            align-items: center;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
        }

        .inline {
            background: pink;
        }

在这里插入图片描述

绝对定位 定高

position: absolute;
top: 50%;
height: 高度;
margin-top: -0.5高度;

       .parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }

        .inline {
            background: pink;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }

在这里插入图片描述

绝对定位 不定高

position: absolute;
top: 50%;
transform: translate( 0, -50%);

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            transform: translate( 0, -50%);
        }

        .inline {
            background: pink;
            height: 100px;
            position: absolute;
            top: 50%;
            transform: translate( 0, -50%);
        }

在这里插入图片描述

绝对定位 top/bottom: 0;

position: absolute;
height: 高度;
top: 0;
bottom: 0;
margin: auto 0;

	.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
        }

        .inline {
            background: pink;
            position: absolute;
            height: 100px;
            top: 0;
            bottom: 0;
            margin: auto 0;
        }

在这里插入图片描述

元素水平垂直居中

绝对定位 不定宽高

绝对定位 transform
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% ,-50%);
        }

在这里插入图片描述

绝对定位 定宽高

绝对定位 margin
position:absolute;
top:50%;
left:50%;
margin-top:-(height/2)px;
margin-left:-(width/2)px;

 .parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

绝对定位 margin:auto
position：absolute/fixed;
top:0;left:0;right:0;bottom:0;
margin:atuo;

		.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

在这里插入图片描述
绝对定位 calc 水平、垂直居中也可以使用此方法
position:absolute;
top:calc(50% - (height/2)px);
left:calc(50% - (width/2)px);

	 	.parent {
   	        background: #eee;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .block {
            background: skyblue;
            position: absolute;
            width: 100px;
            height: 100px;
            top:calc(50% - 50px);
            left:calc(50% - 50px);
        }
  • calc() 函数
    calc() 函数用于动态计算长度值。
    需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
    任何长度值都可以使用calc()函数进行计算；
    calc()函数支持"+", "-", "*", "/"运算；
    calc()函数使用标准的数学运算优先级规则；

flex

display: flex;
justify-content: center;
align-items: center;

.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

在这里插入图片描述

table

display: table-cell;
vertical-align: middle;
text-align: center;
如果是块级元素 需要 display: inline-block;

     background: #eee;
            width: 300px;
            height: 300px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .block {
            background: skyblue;
            width: 100px;
            height: 100px;
            display: inline-block;
        }

        .inline {
            background: pink;
        }

在这里插入图片描述

文本垂直居中

height:高度
line-height:高度

.parent {
            background: #eee;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
        }

在这里插入图片描述

图片垂直居中

在图片前或者后定义一个span元素
width: 0; height: 100%; display: inline-block; vertical-align: middle;
给图片img添加vertical-algin:middle中线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 5px dotted skyblue;
            text-align: center;

        }
        span{
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <span></span>
        <img src="./img/image.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

前端魔法师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css水平垂直居中方案
jinliyixi的博客
09-11 139
行内元素的水平居中 要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（、、等）中，并且在父层元素CSS设置如下： container{ text-align:center; } 并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。 Demo 块状元素的水平居中 要实现块状元素（displa...
CSS 水平垂直居中全套方案
yq_giveYouMoney的博客
05-07 171
CSS 水平垂直居中 通过css让元素水平垂直居中有两个形式： 居中元素固定宽高： absoulte + 负margin absolute + margin: auto absolute + calc 居中元素不固定宽高 absolute + transform table布局 css table lineHeight flex grid 以下是html代码： <div cla...
CSS 基础系列：水平垂直居中方案
Chorer的博客
04-12 253
比较全面的水平垂直居中方案。水平垂直居中问题大体分为两类，一类目标元素是行内元素，一类目标元素是块级元素(其中，块级元素又包括定宽高和不定宽高）。 1.水平居中方案 1.1 行内元素水平居中 把该行内元素包裹在一个块级父元素中，之后设置父元素: .parent{ text-align:center } 1.2 块级元素水平居中 设置该元素： div{ width: 100px...
div垂直水平居中的四种方法（更新）
Ajax_A的博客
11-21 200
<!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-U...
html垂直水平,html中3种水平垂直方式的比较
weixin_42098251的博客
06-17 148
码农公社 210.net.cn210= 102410月24日一个重要的节日--码农(程序员)节1 绝对定位 + 转换绝对定位 + 转换.parent{position: relative;width: 400px;height: 400px;background: skyblue;}.child{position: absolute;left: 50%; top: 50%;trans...
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...
CSS里的各种水平垂直居中基础写法心得总结
12-13
https://www.jb51.net/w3school/htmldom/prop_style_verticalalign.htm（W3C标准，概念不清的看手册很重要哦） ——————————————————————————– 首先，依旧是概念。介绍一下行内元素和块级...
单行图片文字垂直居中问题——实战
12-08
style type="text/css"> <!– body{ font-size:12px; font-family:"宋体"; } table{ border:1px solid #E6EFF8; margin-bottom:2px; } td{ height:23px; line-height:23px; padding...
CSS的各种居中——如何书写高质量代码
12-13
以上就是CSS中实现水平和垂直居中的多种方法。理解并熟练运用这些技巧，可以帮助你编写出更高效、适应性强的代码，以满足各种布局需求。在实际项目中，选择哪种方法取决于具体需求，例如兼容性、性能和可维护性等...
CSS简单的图片居中
热门推荐
unsleepfish的博客
05-15 4万+
图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如 一般设置图片属性 ​text-align:center ​ 水平居中，但这个方法经常无效，很多前端工程师都有研究过或者说是搜索过 CSS 图片居中方法吧。 但其实CSS 图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示： 图片居中又分为水平居中和垂直居中 提示：在你开始阅读以下内容之前，你可以先了解CSS图片的基础内容。 一、水平居中： 1、单独文字垂直居中我们只需要设置 CSS
CSS图片水平垂直居中的三种方法
sunsineq的专栏
07-14 4983
其次最重要的是设置图片元素的vertical-align属性为middle，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。具体方式是先使用定位让图片向右和向下偏移父元素的50%，再相对自身向左和向上偏移50%，这样就实现图片在父元素水平垂直居中了。我们知道img元素为行内快元素，所以首先设置图片元素的父元素里文字水平居中，行高与整体高度一致。设置图片元素的父盒子为弹性盒子，让项目在主轴和侧轴的排列方式都居中。2.使用定位和translate。2.使用定位和translate。
【前端】CSS水平居中的6种方法
最新发布
karshey的博客
08-11 2604
左右两边间隔相等的居中。
css图片如何垂直水平居中设置
m0_61619195的博客
06-21 1万+
css图片垂直水平居中对齐
css 垂直居中_CSS垂直居中、水平居中
weixin_39863017的博客
11-29 264
CSS垂直居中、水平居中让一个div或者一段文字亦或者一张照片居中显示的问题，面试的过程中也经常被问到。相信大家都日常的布局也经常会用到，回答出个三两种解决方案亦不是难事。但今天我细究了一下，发现还有新大陆可寻，特意留此博文总结一下，与君分享！如果你有新的方法，欢迎补充！ 我们先从固定宽高的div开始为方便演示，默认宽高各为'100px'的div<div class="wrapper"&...
CSS让图片(垂直水平居中、垂直居中、水平居中)方法
换日线的博客
04-16 7694
图片水平垂直居中 如下图所示 1.使用text-align: center配合line-height完成水平垂直居中 /* CSS */ .vertical{ width: 100%; height:300px; background-color: #ddd; text-align: center; line-height: 300px; } .vertical&gt...
CSS解决文字与图片不能水平居中对齐的问题
sky_sunshine_x的博客
10-24 1946
在 HTML 代码中，有时会需要在文字旁边加上一个图标。 默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐 解决办法：在css中设置图片的vertical-align属性， <img src="" style="vertical-align:text-bottom" /> ...
css中怎么让图片居中？css图片居中的方法总结
lin123_00的博客
05-18 1万+
在进行网页布局的时候，有时候图片的位置可能会影响整个页面的美观程度，所以对于图片的放置位置就得变化，那么，接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法，对于有需要的朋友来说可以做个参考。 css图片居中分css图片水平居中和垂直居中两种情况，那么下面我们就来分别看一看这些图片居中的实现方法。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s.
CSS实现水平垂直居中的6种方式
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
css实现元素水平垂直居中——6种方式
weixin_58691935的博客
07-02 3199
实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局
css绝对定位垂直居中
07-28
- *1* *2* [CSS 垂直居中的七种方法——史上最详细总结](https://blog.csdn.net/qq_37384271/article/details/108993564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值